@import '../styles/variables';

$sliderHeight: 8px;
$sliderRangeBackground: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 100%);
$sliderBackground: #e6e6e6;
$sliderBorderRadius: 10px;
$sliderBorder: $duda-gray;
$sliderThumbBackground: $light-gray;
$sliderThumbSize: 12px;
$sliderThumbSizeFirefox: 10px;

.wrapper {
    position: relative;
    width: 100%;
    height: $sliderHeight;
}

.range-input {
    margin: 0;
    margin-top: $sliderHeight/2;
    left: 0;
    height: 0;
    width: 100%;
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    pointer-events: none;
    cursor: pointer;
    z-index: 3;
    outline: none;

    @mixin thumb() {
        background: $sliderThumbBackground;
        border: 1px solid $sliderBorder;
        pointer-events: all;
    }
    &::-webkit-slider-thumb {
        @include thumb();
        width: $sliderThumbSize;
        height: $sliderThumbSize;
        -webkit-appearance: none;
        border-radius: 50%;
    }

    &::-moz-range-thumb {
        @include thumb();
        width: $sliderThumbSizeFirefox;
        height: $sliderThumbSizeFirefox;
        position: relative;
    }

    &::-moz-focus-outer {
        border: 0;
    }
}

.slider {
    position: relative;
    width: 100%;
    height: $sliderHeight;
    border: 1px solid $sliderBorder;
    background: $sliderBackground;
    border-radius: $sliderBorderRadius;
    box-sizing: border-box;
    .track,
    .range {
        position: absolute;
        border-radius: $sliderBorderRadius;
        height: 100%;
    }

    .track {
        background: $sliderBackground;
        box-shadow: $default-inset-box-shadow;
        width: 100%;
    }

    .range {
        background: $sliderRangeBackground;
    }

    .middle {
        position: absolute;
        left: 50%;
        top: -5px;
        height: calc(100% + 10px);
        width: 2px;
        background: $duda-gray;
        z-index: 2;
    }
}