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

@mixin ss-range {
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    background: transparent;
    cursor: pointer;

    &::-webkit-slider-runnable-track {
        height: map.get(config.$ss-range-config, track-height);
        border-radius: map.get(config.$ss-range-config, track-radius);
        background: linear-gradient(
            to right,
            map.get(config.$ss-range-config, fill) var(--ss-range-progress, 0%),
            map.get(config.$ss-range-config, track-bg) var(--ss-range-progress, 0%)
        );
    }
    &::-moz-range-track {
        height: map.get(config.$ss-range-config, track-height);
        border-radius: map.get(config.$ss-range-config, track-radius);
        background: map.get(config.$ss-range-config, track-bg);
    }
    &::-moz-range-progress {
        height: map.get(config.$ss-range-config, track-height);
        border-radius: map.get(config.$ss-range-config, track-radius);
        background: map.get(config.$ss-range-config, fill);
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: map.get(config.$ss-range-config, thumb-size);
        height: map.get(config.$ss-range-config, thumb-size);
        margin-top: map.get(config.$ss-range-config, thumb-offset);
        border-radius: 50%;
        background: map.get(config.$ss-range-config, thumb-bg);
        border: map.get(config.$ss-range-config, thumb-border);
        box-shadow: map.get(config.$ss-range-config, thumb-shadow);
    }
    &::-moz-range-thumb {
        width: map.get(config.$ss-range-config, thumb-size);
        height: map.get(config.$ss-range-config, thumb-size);
        border-radius: 50%;
        background: map.get(config.$ss-range-config, thumb-bg);
        border: map.get(config.$ss-range-config, thumb-border);
        box-shadow: map.get(config.$ss-range-config, thumb-shadow);
    }

    &:focus-visible {
        outline: map.get(config.$ss-range-config, focus-ring);
        outline-offset: map.get(config.$ss-range-config, focus-ring-offset);
    }
    &:disabled {
        opacity: map.get(config.$ss-range-config, disabled-opacity);
        cursor: not-allowed;
    }
}

@mixin ss-range-size($size) {
    $s: map.get(map.get(config.$ss-range-config, sizes), $size);
    $t: map.get($s, track);
    $h: map.get($s, thumb);

    &::-webkit-slider-runnable-track {
        height: $t;
    }
    &::-moz-range-track,
    &::-moz-range-progress {
        height: $t;
    }
    &::-webkit-slider-thumb {
        width: $h;
        height: $h;
        margin-top: calc((#{$t} - #{$h}) / 2);
    }
    &::-moz-range-thumb {
        width: $h;
        height: $h;
    }
}

@mixin ss-range-variant($color) {
    --ss-range-fill: #{$color};

    &::-webkit-slider-thumb {
        background: $color;
    }
    &::-moz-range-thumb {
        background: $color;
    }
}

/// Label + `<output>` readout above the slider, optional min/max scale below.
@mixin ss-range-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label output"
        "input input"
        "min max";
    align-items: center;
    gap: map.get(config.$ss-range-config, field-gap);
}

/// One row: label | slider | readout (property inspectors, toolbars).
@mixin ss-range-field-inline {
    grid-template-columns: auto minmax(q(80), 1fr) auto;
    grid-template-areas: "label input output";
}

@mixin ss-range-label {
    grid-area: label;
    font-weight: map.get(config.$ss-range-config, label-weight);
}

@mixin ss-range-output {
    grid-area: output;
    min-inline-size: 4ch;
    font-weight: map.get(config.$ss-range-config, output-weight);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

@mixin ss-range-scale {
    color: map.get(config.$ss-range-config, scale-color);
    font-size: map.get(config.$ss-range-config, scale-font-size);
    font-variant-numeric: tabular-nums;
}