/* scss/Atoms/_Range-Slider.scss */

input[type="range"] {
	@include appearance(none);
	height: 2px;
	@include borderRadius(1px);
	-webkit-box-sizing: content-box;
	box-sizing: content-box;

	&::-webkit-slider-thumb {
        @include appearance(none);
		background-color: #fff;
		height: 20px;
		width: 20px;
		border-radius: 50em;
		box-shadow: 0 0 1px 1px rgba(0,0,0,0.2);
	}
}

$track-w: 100%;
$track-h: .25em;
$thumb-d: 1.5em;
$track-c: #ccc;
$fill-c: blue;

@mixin track($fill: 0) {
    box-sizing: border-box;
    border: none;
    width: $track-w; height: $track-h;
    background: $track-c;
    @include borderRadius(1em);
    outline: none;

    @if $fill == 1 {
        .js & {
            background: transparent;
        }
    }


    &:focus, &:active {
        outline: none;
        border: none;
    }
}

@mixin fill() {
    display: block;
    background: rgba($secondary-color,0.8);
}

@mixin thumb() {
    box-sizing: border-box;
    border: 1px solid rgba(white, 0.0);
    width: $thumb-d; height: $thumb-d;
    @include borderRadius(50%);
    background: #fff;
    cursor: pointer;
    @include box-shadow($x-axis:0px,  $y-axis:0px, $blur: 2px, $color:rgba(0,0,0,0.3));
    transition: all 0.25s ease-in-out;

     &:hover {
            border: 1px solid rgba($secondary-color, 1);
            transition: all 0.25s ease-in-out;
        }

    &:focus {
        outline: none;
    }
}

[type='range'] {
    &, &::-webkit-slider-thumb {
        @include appearance(none);
    }

    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--val) - var(--min))/var(--range));
    --sx: calc(.5*#{$thumb-d} + var(--ratio)*(100% - #{$thumb-d}));
    margin: 0;
    padding: 0;
    width: $track-w; height: $thumb-d;
    background: transparent;
    font: 1em/1 arial, sans-serif;

    &::-webkit-slider-runnable-track {
        @include track(1)
    }
    &::-moz-range-track { @include track }
    &::-ms-track { @include track }

    &::-moz-range-progress { @include fill }
    &::-ms-fill-lower { @include fill }

    &::-webkit-slider-thumb {
        margin-top: .5*($track-h - $thumb-d);
        @include thumb
    }
    &::-moz-range-thumb { @include thumb }
    &::-ms-thumb {
        margin-top: 0;
        @include thumb
    }

    &::-ms-tooltip { display: none }
}