@use '../../scss/config.scss' as *;

.slider {
    --bg: var(--w-slider-background, var(--w-color-primary-50));
    --color: var(--w-slider-color, var(--w-color-primary));
    --thumb: var(--w-slider-thumb, var(--w-color-primary-50));

    @include border-radius(xl);
    @include size('w100%');
    @include visibility(hidden);
    @include size(h10px);
    @include spacing(m0);

    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;

    &[disabled] {
        cursor: no-drop;
    }

    &[disabled]::-webkit-slider-runnable-track {
        @include background(primary-50);
    }
    
    &[disabled]::-moz-range-track {
        @include background(primary-50);
    }

    &[disabled]::-webkit-slider-thumb {
        @include background(primary-50);
        @include border(primary-30);
        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
    }

    &[disabled]::-moz-range-thumb {
        @include background(primary-50);
        @include border(primary-30);
        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
    }
}

.slider::-webkit-slider-runnable-track {
    @include background(var(--bg));
}

.slider::-moz-range-track {
    @include background(var(--bg));
    @include size(h10px);
}

.slider::-webkit-slider-thumb {
    @include background(var(--thumb));
    @include size(10px);
    @include border-radius(max);
    @include border(var(--color));

    -webkit-appearance: none;
    appearance: none;
    box-shadow: -995px 0 0 990px var(--color);
}

.slider::-moz-range-thumb {
    @include background(var(--thumb));
    @include size(9px);
    @include border-radius(max);
    @include border(var(--color));

    box-shadow: -995px 0 0 990px var(--color);
}