/* Trackbar — msctls_trackbar32 (INVENTORY R2, SPEC.md §4.6). Geometry is computed in js/components/trackbar.js from
   the --metric-trackbar-* tokens; this file only colors the parts. */
.w2k-trackbar {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: var(--metric-trackbar-default-length);
  height: var(--metric-trackbar-default-across);
  overflow: hidden;            /* ticks are clipped by the control rectangle, as in Mouse › Motion */
  outline: none;
  touch-action: none;
  user-select: none;
}
.w2k-trackbar[data-style~="vert"] {
  width: var(--metric-trackbar-default-across);
  height: var(--metric-trackbar-default-length);
}
.w2k-trackbar[data-style~="both"]:not([data-style~="noticks"]) { --metric-trackbar-default-across: var(--metric-trackbar-default-across-both); }
.w2k-trackbar[data-style~="vert"][data-style~="both"]:not([data-style~="noticks"]) { width: var(--metric-trackbar-default-across-both); }

.w2k-trackbar__channel {
  position: absolute;
  box-shadow: var(--edge-sunken);
}
.w2k-trackbar[data-style~="enableselrange"] .w2k-trackbar__channel { background: var(--sys-btn-hilight); }
.w2k-trackbar__sel { position: absolute; background: var(--sys-hilight); }

.w2k-trackbar__ticks { position: absolute; left: 0; top: 0; fill: var(--sys-btn-text); }
.w2k-trackbar__thumb { position: absolute; overflow: visible; }
.w2k-trackbar__hilight { fill: var(--sys-btn-hilight); }
.w2k-trackbar__light { fill: var(--sys-btn-light); }
.w2k-trackbar__face { fill: var(--color-control-face); }
.w2k-trackbar__shadow { fill: var(--sys-btn-shadow); }
.w2k-trackbar__dkshadow { fill: var(--sys-btn-dk-shadow); }
/* Dragged or disabled thumb: ButtonFace/ButtonHilight dither (knowledge). */
.w2k-trackbar__dither { fill: var(--sys-btn-hilight); display: none; }
.w2k-trackbar[data-pressed] .w2k-trackbar__dither,
.w2k-trackbar.is-active .w2k-trackbar__dither,
.w2k-trackbar[aria-disabled="true"] .w2k-trackbar__dither { display: inline; }

/* Focus: dotted rectangle around the whole control (knowledge). */
.w2k-trackbar__focus { position: absolute; inset: 0; }
.w2k-trackbar:not(:focus):not(.is-focus) > .w2k-trackbar__focus { display: none; }
html[data-cues="hidden"] .w2k-trackbar.is-focus > .w2k-trackbar__focus { display: block; }