$track-color: $whitish;
$thumb-color: $grayer;
$thumb-shadow: rgba($thumb-color, .3);

$thumb-radius: 50%;
$thumb-height: 14px;
$thumb-width: 14px;
$thumb-border-width: 0;
$thumb-border-color: transparent;

$track-width: 200px;
$track-height: 3px;
$track-border-width: 0;
$track-border-color: transparent;

$track-radius: 1px;
$contrast: 2;

@mixin track() {
    width: $track-width;
    height: $track-height;
    cursor: pointer;
    transition: all .2s ease;
}

@mixin thumb() {
    border: $thumb-border-width solid $thumb-border-color;
    height: $thumb-height;
    width: $thumb-width;
    border-radius: $thumb-radius;
    background: $thumb-color;
    cursor: pointer;
    box-shadow: 0 0 0 2px $thumb-shadow;
    transition: box-shadow .2s;
}

.range-slider {
    -webkit-appearance: none;
    margin: $thumb-height / 2 0;
    width: $track-width;

    &:focus {
        &::-webkit-slider-runnable-track {
            background: lighten($track-color, $contrast);
        }
        &::-webkit-slider-thumb {
            box-shadow: 0 0 0 4px $thumb-shadow;
        }
        &::-moz-range-thumb {
            box-shadow: 0 0 0 4px $thumb-shadow;
        }
        &::-ms-fill-lower {
            background: $track-color;
        }
        &::-ms-fill-upper {
            background: lighten($track-color, $contrast);
        }
    }

    &::-webkit-slider-runnable-track {
        @include track();
        background: $track-color;
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius;
    }

    &::-webkit-slider-thumb {
        @include thumb();
        -webkit-appearance: none;
        margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
    }

    &::-moz-range-track {
        @include track();
        background: $track-color;
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius;
    }

    &::-moz-range-thumb {
        @include thumb();
    }

    &::-ms-track {
        @include track();
        background: transparent;
        border-color: transparent;
        border-width: $thumb-width 0;
        color: transparent;
    }

    &::-ms-fill-lower {
        background: darken($track-color, $contrast);
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius * 2;
    }

    &::-ms-fill-upper {
        background: $track-color;
        border: $track-border-width solid $track-border-color;
        border-radius: $track-radius * 2;
    }

    &::-ms-thumb {
        @include thumb();
    }

}