@import 'common/mixins';

.slider {
    @include appearance(none);
    @include transition(opacity .2s);
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: $slider-bg;
    outline: none;

    // Cursed be thy name Chrome for forcing designers to this hysterical redundancy
    &::-webkit-slider-thumb {
        @include appearance(none);
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 0;
        background: $slider-thumb-bg;
        cursor: pointer;
    }

    &::-moz-range-thumb {
        @include appearance(none);
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 0;
        background: $slider-thumb-bg;
        cursor: pointer;
    }

    &[disabled]::-webkit-slider-thumb {
        display: none;
        width: 0;
    }

    &[disabled]::-moz-range-thumb {
        display: none;
        width: 0;
    }

    &.disabled { opacity: 0.3; }

    &::-moz-range-track {
        @include appearance(none);
    }

    &::-moz-range-progress {
        background: $slider-progress-bg;
        height: 15px;
    }

    &[disabled]::-webkit-progress-value {
        background: none;
    }

    &[disabled]::-moz-range-progress {
        background: none;
    }
}

