/* Slider mapping. ui-viz has no Slider spec, so these are current HM values built from the HM Semantic / Primitive tokens.
   Track, Range and Thumb are internal parts, so they are styled here; the Slider's own width / height stay `className` territory.
   States: Radix attributes ([data-disabled], [data-orientation]) and :hover / :active / :focus-visible on the thumb. */
:root, [data-hm-theme] {
  --hm-slider-track-size: 6px;
  --hm-slider-track-background: var(--hm-sem-palette-warm-neutral-light);
  --hm-slider-range-background: var(--hm-sem-state-active);

  --hm-slider-thumb-size: 18px;
  --hm-slider-thumb-background: var(--hm-sem-bg-surface);
  --hm-slider-thumb-border-width: 2px;
  --hm-slider-thumb-border-color: var(--hm-sem-state-active);
  /* Interaction halo: hover shows it, dragging widens it. Keyboard focus has its own semantic color. */
  --hm-slider-thumb-halo-color: color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent);
  --hm-slider-thumb-focus-halo-color: color-mix(in srgb, var(--hm-sem-stroke-input-focus) 20%, transparent);
  --hm-slider-thumb-halo-size: 4px;
  --hm-slider-thumb-halo-size-active: 6px;

  /* Current HM value for this component only; not a global Disabled rule. */
  --hm-slider-disabled-opacity: 0.6;
}

[data-slot="slider-track"] {
  border-radius: 9999px;
  background: var(--hm-slider-track-background);
}
[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-track"] {
  height: var(--hm-slider-track-size);
  width: 100%;
}
[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-track"] {
  width: var(--hm-slider-track-size);
  height: 100%;
}
[data-slot="slider-range"] {
  background: var(--hm-slider-range-background);
}
[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-range"] {
  height: 100%;
}
[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-range"] {
  width: 100%;
}

[data-slot="slider-thumb"] {
  box-sizing: border-box;
  width: var(--hm-slider-thumb-size);
  height: var(--hm-slider-thumb-size);
  border: var(--hm-slider-thumb-border-width) solid var(--hm-slider-thumb-border-color);
  border-radius: 9999px;
  background: var(--hm-slider-thumb-background);
  cursor: grab;
}
[data-slot="slider-thumb"]:hover {
  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-halo-color);
}
[data-slot="slider-thumb"]:active {
  cursor: grabbing;
  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-halo-color);
}
/* Focus wins the color when states overlap; drag keeps its 6px size and grabbing cursor. */
[data-slot="slider-thumb"]:focus-visible {
  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-focus-halo-color);
}
[data-slot="slider-thumb"]:focus-visible:active {
  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-focus-halo-color);
}

[data-slot="slider"][data-disabled] {
  opacity: var(--hm-slider-disabled-opacity);
}
[data-slot="slider"][data-disabled] [data-slot="slider-thumb"] {
  cursor: not-allowed;
  box-shadow: none;
}