/* FILE: customize-controls/_control-range.scss */

$range_track_size: 1em;
$range_track_color: #ccc;
$range_thumb_size: 1.5em;
$range_thumb_color: #007cad;
$range_thumb_color_hover: #ad007c;
$range_value_background: $range_thumb_color;
$range_value_background_hover: $range_thumb_color_hover;
$range_value_color: #fff;

@mixin range_track() {
	width: 100%;
	height: $range_track_size;
	cursor: pointer;
	@include range_track_colors;
}

@mixin range_track_colors() {
	background: $range_track_color;
	border: 0;
	border-radius: $range_thumb_size;
	box-shadow: none;
}

@mixin range_thumb() {
	appearance: none;
	width: $range_thumb_size;
	height: $range_thumb_size;
	margin-top: ( $range_track_size - $range_thumb_size ) / 2;
	background: $range_thumb_color;
	border: 0;
	border-radius: .191em;
	box-shadow: none;
	cursor: pointer;
}

	@mixin range_thumb_hover() {
		background: $range_thumb_color_hover;
	}

input[type=range] {
	appearance: none;
	width: 100%;
	margin: 1.618em 0;
	background: transparent;

	&::-webkit-slider-runnable-track { @include range_track; }
	&::-moz-range-track              { @include range_track; }
	&::-ms-track                     { @include range_track; }

	&::-webkit-slider-thumb { @include range_thumb; }
	&::-moz-range-thumb     { @include range_thumb; }
	&::-ms-thumb            { @include range_thumb; }

		&:focus::-webkit-slider-thumb { @include range_thumb_hover; }
		&:focus::-moz-range-thumb     { @include range_thumb_hover; }
		&:focus::-ms-thumb            { @include range_thumb_hover; }

	&::-ms-fill-upper { @include range_track_colors; }
	&::-ms-fill-lower { @include range_track_colors; }

}

.range {

	&-container {
		display: flex;
		align-items: center;
		cursor: default;

		&:hover input[type=range]::-webkit-slider-thumb { @include range_thumb_hover; }
		&:hover input[type=range]::-moz-range-thumb     { @include range_thumb_hover; }
		&:hover input[type=range]::-ms-thumb            { @include range_thumb_hover; }

	}

	&-value {
		position: relative;
		min-width: 16%;
		padding: .382rem;
		margin-#{$left}: .382rem;
		text-align: center;
		font-size: .9em;
		background: $range_value_background;
		color: $range_value_color;
		border-radius: .191rem;
		cursor: help;

		&::before {
			content: '';
			position: absolute;
			width: .382rem;
			height: .382rem;
			#{$left}: 0;
			top: 50%;
			margin: -.191rem;
			background: inherit;
			transform: rotate( 45deg );
		}

	}

}

.range-container:hover .range-value,
input[type=range]:focus + .range-value {
	background: $range_value_background_hover;
}