/* ============================================================
   SLIDER — the gauge you can drag. Figma 86:12327
   ------------------------------------------------------------
       <label class="ice-slider" data-size="m">
         <input type="range" class="ice-slider__input" min="0" max="100" value="60">
         <span class="ice-gauge"></span>
         <span class="ice-slider__thumb"></span>
       </label>

   The track and the fill ARE the gauge — same element, same class,
   so a slider and a read-only score can never drift apart. The
   slider only adds two things: a thumb, and a native
   <input type="range"> laid transparent over the top.

   The input carries the value, the keyboard and the accessibility,
   so there is no drag handler here. js/slider.js does one thing:
   publish the value as --value, which the fill and the thumb both
   read.

   ON HOVER the fill turns `live` — the vivid blue at full strength
   — and the thumb picks up the highlight glow. It is the same
   promise as everywhere else in the system: vivid blue means the
   thing is under your hand.
   ============================================================ */

.ice-slider {
  position: relative;
  display: inline-flex;
  align-items: center;
  inline-size: var(--w-150);
  cursor: pointer;
}

.ice-slider > .ice-gauge { inline-size: 100%; }

/* The real control: invisible, on top, still focusable. */
.ice-slider__input {
  position: absolute;
  inset-inline: 0;
  inset-block: 50%;
  translate: 0 -50%;
  inline-size: 100%;
  block-size: var(--height-2xs);
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

/* 24px at every size — the thumb does not shrink with the track,
   it stays a comfortable target. */
.ice-slider__thumb {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--value, 0) * 100%);
  translate: -50% -50%;
  pointer-events: none;

  inline-size: var(--height-2xs);
  block-size:  var(--height-2xs);
  border-radius: var(--radius-full);

  border: var(--border-w) solid;
  border-color: var(--elev-primary-4-border-lit) var(--elev-primary-4-border-lit)
                var(--elev-primary-4-border)     var(--elev-primary-4-border);
  background-image: var(--elev-primary-4-image);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(var(--shadow-xs-blur));
  -webkit-backdrop-filter: blur(var(--shadow-xs-blur));

  transition: box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* --- Hover --------------------------------------------------
   Measured on the sheet: a tighter highlight than the buttons —
   0 4px 16px of the link blue at 50%, over 0 2px 6px of cyan at
   20% — and the stroke goes flat grey. */
.ice-slider:not(:has(> .ice-slider__input:disabled)):hover > .ice-gauge::before,
.ice-slider:not(:has(> .ice-slider__input:disabled)):focus-within > .ice-gauge::before {
  background-image: linear-gradient(to right, var(--vivid-blue-600), var(--vivid-blue-400));
  opacity: 1;
}
.ice-slider:hover > .ice-slider__thumb,
.ice-slider:focus-within > .ice-slider__thumb {
  border-color: var(--ice-grey-500);
  box-shadow: 0 4px 16px 0 rgb(39 104 206 / .50),
              0 2px 6px  0 rgb(0 250 252 / .20);
}

/* Disabled IS the gauge: the thumb goes, the hover goes, the
   pointer goes — and the opacity stays, because a score that
   cannot be moved is still a score to read. */
.ice-slider:has(> .ice-slider__input:disabled) { pointer-events: none; cursor: default; }
.ice-slider:has(> .ice-slider__input:disabled) > .ice-slider__thumb { display: none; }