// Range control.
$range-track-color: #c0c0c0;
$range-progress-color: $link-color;
$range-thumb-color: $link-color;
$range-thumb-color-focus: $link-active-color;
$range-progress-color-focus: $link-active-color;
$range-thumb-size: 10px;
$range-track-height: 2px;
$range-input-width: 31px;

.range-control {
	position: relative;
	display: inline-flex;

	input[type=range] {
		width: calc(100% + 10px);
		height: 20px;
		margin: 2px -5px;
		padding: 0;
		vertical-align: top;
		opacity: 0;
		cursor: pointer;
		-webkit-appearance: none; // Hides the slider so that custom slider can be made.
		-moz-appearance: none; // Hides the slider so that custom slider can be made.

		&:focus {
			outline: none;
		}

		// Special styling for WebKit/Blink.
		&::-webkit-slider-thumb,
		&::-moz-range-thumb {
			height: $range-thumb-size;
			width: $range-thumb-size;
			margin-top: 1px; // You need to specify a margin in Chrome, but in Firefox and IE it is automatic.
			opacity: 0;
		}

		&::-webkit-slider-runnable-track {
			height: $range-thumb-size;
			opacity: 0;
		}
	}

	input[type=text] {
		width: $range-input-width;
	}

	> div {
		position: relative;
		width: calc(100% - 10px - #{$range-input-width});
		margin-right: $range-thumb-size;
	}

	.range-control-track,
	.range-control-progress {
		position: absolute;
		top: 50%;
		left: 0;
		height: $range-track-height;
		margin-top: -$range-track-height / 2;
		cursor: pointer;
	}

	.range-control-track {
		width: 100%;
		background: $range-track-color;
	}

	.range-control-progress {
		background: $range-progress-color;
	}

	.range-control-thumb {
		position: absolute;
		top: 50%;
		width: $range-thumb-size;
		height: $range-thumb-size;
		margin-top: -$range-thumb-size / 2;
		margin-left: -$range-thumb-size / 2;
		background: $range-thumb-color;
		border-radius: 50%;
	}

	&.range-control-focus {
		.range-control-thumb {
			margin-top: -$range-thumb-size / 1.5;
			margin-left: -$range-thumb-size / 1.5;
			background: $range-thumb-color-focus;
			border: 2px solid lighten($btn-bg-color, 10%);
		}

		.range-control-progress {
			background: $range-progress-color-focus;
		}
	}

	&.disabled {
		opacity: 1;

		input[type=range] {
			cursor: default;
		}
		.range-control-progress,
		.range-control-thumb {
			background: #c0c0c0;
		}
	}

	datalist {
		position: absolute;
		top: 50%;
		display: flex;
		width: 100%;
		margin-top: -$range-track-height / 2;

		option {
			flex: 1 0 0;
			height: $range-track-height;
			padding: 0;
			font-size: 0;
			border-left: 1px solid $body-bg-color;
		}
	}
}
