@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: map.get(config.$ss-range-config, track-bg);
    }
    &::-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);
    }

    &::-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 { 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) {
    &::-webkit-slider-thumb { background: $color; }
    &::-moz-range-thumb { background: $color; }
}