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

body {
    --w-slider-background: var(--w-color-primary-50);
    --w-slider-color: var(--w-color-primary);
    --w-slider-thumb: var(--w-color-primary-50);
}

.slider {
    @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(--w-slider-background));
}

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

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

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

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

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