.range-field {
  position: relative;
  min-width: 0;

  // Keep supporting messages close without reducing the slider's interaction area.
  &:has(> .supporting-text),
  &:has(+ .supporting-text) {
    > input[type='range'] { margin-bottom: 0; }
  }

  > .supporting-text,
  + .supporting-text { margin-top: 0; }
}

.range-field-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;

  > label { min-width: 0; }
  > output {
    flex-shrink: 0;
    color: var(--md-sys-color-on-surface);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
}


input[type='range'] {
  --range-active-color: var(--md-sys-color-primary);
  --range-inactive-color: var(--md-sys-color-surface-variant);
  --range-handle-size: 20px;
  --range-track-height: 4px;
  --range-direction: to right;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 8px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  &:dir(rtl) { --range-direction: to left; }
  &:focus { outline: none; box-shadow: none; }
  &:disabled {
    --range-active-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    --range-inactive-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    cursor: default;
  }
}

@mixin range-track {
  box-sizing: border-box;
  height: var(--range-track-height);
  border: none;
  border-radius: 999px;
  background: linear-gradient(var(--range-direction),
    var(--range-active-color) 0 var(--range-progress, 50%),
    var(--range-inactive-color) var(--range-progress, 50%) 100%);
}
@mixin range-handle {
  box-sizing: border-box;
  width: var(--range-handle-size);
  height: var(--range-handle-size);
  border: none;
  border-radius: 50%;
  background: var(--range-active-color);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 24%, transparent);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
input[type='range']::-webkit-slider-runnable-track { @include range-track; }
input[type='range']::-moz-range-track { @include range-track; }
input[type='range']::-moz-range-progress { background: transparent; }
input[type='range']::-webkit-slider-thumb {
  @include range-handle;
  -webkit-appearance: none;
  margin-top: calc((var(--range-track-height) - var(--range-handle-size)) / 2);
}
input[type='range']::-moz-range-thumb { @include range-handle; }
input[type='range']:not(:disabled):hover::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
input[type='range']:not(:disabled):hover::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
input[type='range']:not(:disabled):is(:focus-visible, :active, .active)::-webkit-slider-thumb {
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}
input[type='range']:not(:disabled):is(:focus-visible, :active, .active)::-moz-range-thumb {
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}

// Decorative value indicator. The native input retains keyboard and ARIA semantics.
input[type='range'] + .thumb {
  position: absolute;
  z-index: 3;
  display: block;
  width: max-content;
  min-width: 32px;
  max-width: min(16rem, 80vw);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -100%) scale(.85);
  transform-origin: bottom center;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--range-label-arrow, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom: 0;
    border-top-color: var(--md-sys-color-primary);
  }
  .value { display: block; }
  &.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) scale(1);
  }
}
.range-ticks {
  position: absolute;
  height: 4px;
  pointer-events: none;
  > span {
    position: absolute;
    top: 1px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--md-sys-color-on-surface-variant);
    &.is-active { background: var(--md-sys-color-on-primary); }
  }
  &.is-disabled { opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  input[type='range'] + .thumb { transition: none; }
  input[type='range']::-webkit-slider-thumb { transition: none; }
  input[type='range']::-moz-range-thumb { transition: none; }
}
@media (forced-colors: active) {
  input[type='range'] {
    --range-active-color: Highlight;
    --range-inactive-color: GrayText;
  }
  input[type='range']:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  input[type='range']::-webkit-slider-runnable-track { border: 1px solid CanvasText; }
  input[type='range']::-moz-range-track { border: 1px solid CanvasText; }
  input[type='range']::-webkit-slider-thumb { border: 1px solid CanvasText; }
  input[type='range']::-moz-range-thumb { border: 1px solid CanvasText; }
  input[type='range'] + .thumb { border: 1px solid CanvasText; }
}

/// Two-handle interval. Native inputs retain focus, keyboard, touch and form behavior.
.range-interval {
    position: relative;
    display: grid;
    min-width: 0;
    isolation: isolate;

    --range-direction: to right;
    --range-outer-color: var(--range-muted-color, var(--md-sys-color-surface-variant));
    --range-inner-color: var(--md-sys-color-primary);
    &:dir(rtl) { --range-direction: to left; }

    &::before {
        content: '';
        grid-area: 1 / 1;
        align-self: center;
        height: var(--range-track-height, 4px);
        border-radius: 999px;
        background: linear-gradient(var(--range-direction),
            var(--range-outer-color) 0 var(--range-start),
            var(--range-inner-color) var(--range-start) var(--range-end),
            var(--range-outer-color) var(--range-end) 100%);
    }
    &:has(input:disabled)::before { opacity: .38; }
    &.range-compact { --range-track-height: 2px; }
    &.range-expressive { --range-track-height: 12px; }

    > input[type='range'] {
        grid-area: 1 / 1;
        pointer-events: none;
        z-index: var(--range-start-layer, 1);

        ~ input[type='range'] { z-index: 1; }
        &:focus-visible { z-index: 2; }

        &::-webkit-slider-runnable-track { background: transparent; }
        &::-moz-range-track { background: transparent; }
        &::-webkit-slider-thumb { pointer-events: auto; }
        &::-moz-range-thumb { pointer-events: auto; }
        &:disabled::-webkit-slider-thumb { pointer-events: none; }
        &:disabled::-moz-range-thumb { pointer-events: none; }
    }

    // Interval steps use native snapping; single-value ranges provide tick marks.
    > .range-ticks { display: none; }
}

/// Size variants preserve the native 48px interaction area.
.range-field.range-compact input[type='range'],
.range-interval.range-compact > input[type='range'] {
    --range-track-height: 2px;
    --range-handle-size: 16px;
}
.range-field.range-expressive input[type='range'],
.range-interval.range-expressive > input[type='range'] {
    --range-track-height: 12px;
    --range-handle-size: 24px;
}

@media (forced-colors: active) {
    .range-interval::before { background: CanvasText; }
}

/// Highlight the two outside segments, with visible end stops.
.range-interval.range-outside {
    --range-outer-color: var(--md-sys-color-primary);
    --range-inner-color: var(--range-muted-color, var(--md-sys-color-surface-variant));

    &::before { clip-path: inset(0 var(--range-edge, 10px)); }
    &::after {
        content: '';
        position: absolute;
        inset-inline: calc(var(--range-edge, 10px) - 1px);
        top: 50%;
        height: 16px;
        transform: translateY(-50%);
        border-inline: 2px solid var(--md-sys-color-primary);
        pointer-events: none;
    }
    &:has(input:disabled)::after { opacity: .38; }
}

/// Editable values use the flat, segmented appearance of number controls.
.range-control {
    --range-muted-color: color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent);
    display: grid;
    grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) minmax(0, 4.5rem);
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline);
    border-radius: 0;
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
    min-width: 0;

    &.range-control-single { grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr); }
    &:focus-within {
        outline: 2px solid var(--md-sys-color-primary);
        outline-offset: -2px;
    }
    &[data-range-variant='outlined'] {
        border: 1px solid var(--md-sys-color-outline);
        border-radius: 4px;
        background: var(--md-sys-color-surface);
    }
    &[data-range-variant='rounded'] {
        border: 1px solid var(--md-sys-color-outline);
        border-radius: 16px;
    }

    > .range-interval,
    > .range-control-track {
        margin-inline: 16px;
        align-self: center;
        min-width: 0;

        > input[type='range'] { height: 56px; margin-block: 0; }
    }
    > .range-control-value {
        position: static;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        min-width: 0;
        min-height: 56px;
        margin: 0;
        padding: 4px;
        box-sizing: border-box;
        border-radius: inherit;
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
        transform: none;

        &:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
        &:last-child { border-start-start-radius: 0; border-end-start-radius: 0; }
        > span { overflow-wrap: anywhere; }
        > .range-control-number > input[type='number'] {
            appearance: textfield;
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            height: 30px;
            margin: 0;
            padding: 0 2px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: inherit;
            box-shadow: none;
            font: inherit;
            font-size: 16px;
            text-align: center;
            font-variant-numeric: tabular-nums;

            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
            color: transparent;
            -webkit-text-fill-color: transparent;
            &:focus {
                color: inherit;
                -webkit-text-fill-color: currentColor;
            }
            &:focus-visible { outline: 2px solid var(--md-sys-color-primary); }
            &:disabled { opacity: .38; }
        }
    }
}

@media (forced-colors: active) {
    .range-interval.range-outside::after { border-color: CanvasText; }
    .range-control { border-color: CanvasText; }
}

/// Fixed viewport for the centered film-roll readout. Focus reveals the real input.
.range-control-number {
    position: relative;
    display: block;
    width: 100%;
    height: 30px;
    min-width: 0;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    text-align: center;

    &:focus-within > .range-control-readout { visibility: hidden; }
    &:has(input:disabled) > .range-control-readout { opacity: .38; }
}
.range-control-readout {
    position: absolute;
    inset: 0 2px;
    overflow: hidden;
    pointer-events: none;
    white-space: nowrap;
    direction: ltr;
}
.range-control-reel {
    display: block;
    > span { display: block; height: 30px; line-height: 30px; }
}