/**
 * slider.css — Range input (input[type="range"])
 *
 * @layer      reset
 * @requires   layers.css, _variables.css
 * @uses       appearance: none — redraws track + thumb from theme tokens
 * @tokens     --ui-slider-* (track height, background, border, radius; thumb size, bg, border, radius)
 *
 * Note: The active region is NOT filled (parity across engines); add a paint
 * via JS if a filled track is needed. The thumb is centered on the track with a
 * calc'd negative margin so retuning either size keeps it aligned.
 */

@layer reset {
  :where(input[type="range"]) {
    --ui-slider-ring-color: var(--ring-color);

    --ui-slider-track-block-size: var(--step-1_5);
    --ui-slider-track-background: var(--muted);
    --ui-slider-track-border: 1px solid var(--muted);
    --ui-slider-track-radius: var(--radius-full);
    --ui-slider-thumb-size: var(--step-4);
    --ui-slider-thumb-background: var(--background);

    --ui-slider-thumb-shadow: var(--shadow-xs);
    --ui-slider-thumb-border: 1px solid var(--border);
    --ui-slider-thumb-radius: var(--radius-full);
    --ui-slider-thumb-offset: calc(var(--ui-slider-track-block-size) * -1);

    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    background: transparent;
    cursor: grab;
    border-radius: var(--ui-slider-track-radius);

    /* transparent outline keeps focus visible in forced-colors / high-contrast
       modes; the visible focus ring lives on the thumb via --shadow-ring */
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);
  }

  :where(input[type="range"])::-webkit-slider-runnable-track {
    block-size: var(--ui-slider-track-block-size);
    inline-size: 100%;
    background: var(--ui-slider-track-background);
    border: var(--ui-slider-track-border);
    border-radius: var(--ui-slider-track-radius);
  }

  :where(input[type="range"])::-moz-range-track {
    block-size: var(--ui-slider-track-block-size);
    inline-size: 100%;
    background: var(--ui-slider-track-background);
    border: var(--ui-slider-track-border);
    border-radius: var(--ui-slider-track-radius);
  }

  :where(input[type="range"])::-webkit-slider-thumb {
    /* ring renders as box-shadow so it composes with --ui-slider-thumb-shadow; the
       ring widths animate from 0 so the ring grows in smoothly on focus */
    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    --_ring: color-mix(in oklch, var(--ui-slider-ring-color) var(--ring-opacity), transparent);
    box-shadow:
      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),
      var(--ui-slider-thumb-shadow);

    -webkit-appearance: none;
    appearance: none;
    margin-block-start: var(--ui-slider-thumb-offset);
    inline-size: var(--ui-slider-thumb-size);
    block-size: var(--ui-slider-thumb-size);
    background-color: var(--ui-slider-thumb-background);
    border: var(--ui-slider-thumb-border);
    border-radius: var(--ui-slider-thumb-radius);

    transition: var(--default-transition);
  }

  :where(input[type="range"])::-moz-range-thumb {
    /* ring renders as box-shadow so it composes with --ui-slider-thumb-shadow; the
       ring widths animate from 0 so the ring grows in smoothly on focus */
    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    --_ring: color-mix(in oklch, var(--ui-slider-ring-color) var(--ring-opacity), transparent);

    appearance: none;
    inline-size: var(--ui-slider-thumb-size);
    block-size: var(--ui-slider-thumb-size);
    background-color: var(--ui-slider-thumb-background);
    border: var(--ui-slider-thumb-border);
    border-radius: var(--ui-slider-thumb-radius);

    box-shadow:
      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),
      var(--ui-slider-thumb-shadow);

    transition: var(--default-transition);
  }

  :where(input[type="range"]:hover) {
    --ui-slider-thumb-border: 1px solid var(--primary);
  }

  :where(input[type="range"]:active) {
    --ui-slider-thumb-shadow: var(--shadow-xs), var(--shadow-ring);

    cursor: grabbing;
  }

  :where(input[type="range"]:focus-visible) {
    --ui-slider-thumb-shadow: var(--shadow-xs), var(--shadow-ring);
  }

  :where(input[type="range"]:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }
}