/* range — @tokens: --range-track-height, --range-thumb-size

   A styled `<input type="range">` slider. The root IS the input — `.hzo-range`
   sits directly on the element, so both vendor track + thumb pseudo-elements are
   painted from here. Native chrome is stripped (`appearance: none`) and rebuilt
   token-only.

   Token-only: the control's track HEIGHT and thumb DIAMETER have no semantic
   token in the scale, so they're component tokens with a literal fallback — the
   same dial pattern icon-button.css / chip.css use. Everything else reads a
   semantic/L1 token.

   Vendor caveat: WebKit and Firefox expose the track + thumb through DIFFERENT,
   non-groupable pseudo-elements (a browser drops the whole selector list if it
   doesn't recognise one pseudo), so each rule is written per-vendor. The focus
   ring goes on the THUMB via box-shadow — `outline` on a range input is unreliable
   across engines. */
.hzo-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

/* ─── Track ─── height + pill fill on the alt surface. Per-vendor (not groupable). */
.hzo-range::-webkit-slider-runnable-track {
    height: var(--range-track-height, 6px);
    background: var(--bg-alt);
    border-radius: var(--radius-full);
}
.hzo-range::-moz-range-track {
    height: var(--range-track-height, 6px);
    background: var(--bg-alt);
    border-radius: var(--radius-full);
}

/* ─── Thumb ─── brand circle. WebKit needs `-webkit-appearance: none` + a
   `margin-top` to vertically centre the thumb on the track (thumb-size vs
   track-height, halved and negated). Firefox centres its thumb natively. */
.hzo-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--range-thumb-size, 18px);
    height: var(--range-thumb-size, 18px);
    margin-top: calc((var(--range-track-height, 6px) - var(--range-thumb-size, 18px)) / 2);
    background: var(--brand);
    border: 0;
    border-radius: var(--radius-full);
}
.hzo-range::-moz-range-thumb {
    width: var(--range-thumb-size, 18px);
    height: var(--range-thumb-size, 18px);
    background: var(--brand);
    border: 0;
    border-radius: var(--radius-full);
}

/* A11y — required. The ring is an OUTLINE on the input itself (offset out from
   the track): visible AND reliably detectable, unlike a thumb-only pseudo ring
   (which several engines don't expose to getComputedStyle). Disabled state. */
.hzo-range:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 4px;
    border-radius: var(--radius-full);
}
.hzo-range[disabled],
.hzo-range[aria-disabled="true"],
.hzo-range.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}