@use "sass:map";
@use "../../01-core/external" as *;

$ss-range-config: (
    // Track
    track-height: q(8),
    track-radius: var(--ss-radius-full),
    track-bg: var(--ss-color-border),

    // Thumb
    thumb-size: q(20),
    thumb-bg: var(--ss-color-accent, currentColor),
    thumb-border: q(2) solid var(--ss-color-background),
    thumb-shadow: var(--ss-a-shadow-sm),

    thumb-offset: q(-6),

    // Filled part of the track (left of the thumb). Firefox draws it
    // natively; WebKit/Blink read `--ss-range-progress`, which
    // RangeOutputManager keeps in sync (no JS: no fill).
    fill: var(--ss-range-fill, var(--ss-color-accent)),

    // Readout (`.ss-c-range-field`)
    field-gap: q(6) q(12),
    label-weight: 500,
    output-weight: 600,
    scale-color: var(--ss-color-text-muted),
    scale-font-size: var(--ss-font-size-sm),

    // Focus / disabled
    focus-ring: var(--ss-focus-ring-width) solid var(--ss-focus-ring-color, currentColor),
    focus-ring-offset: q(4),
    disabled-opacity: 0.5,

    sizes: (
        xs: (track: q(4), thumb: q(12)),
        sm: (track: q(6), thumb: q(16)),
        md: (track: q(8), thumb: q(20)),
        lg: (track: q(10), thumb: q(24)),
    ),
) !default;