/**
 * General Input styling
 *
 * As all ranges in a UI should probably look the same, there
 * is no need to use a class here, and the specific type of
 * input, [range], can instead be the selector to specifically
 * target the form control.
 */
input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	font-size: inherit;
	margin: 1em 0;
	width: em;
}

input[type=range][disabled] {
	opacity: .625;
}


/**
 * Track
 */
input[type=range]::-webkit-slider-runnable-track {
	background: #eee;
	border: .025rem solid #999;
	border-radius: 4px;
	height: .25em;
	width: 100%;
}

input[type=range]::-moz-range-track {
	background: #eee;
	border: .025rem solid #999;
	border-radius: 4px;
	height: .25em;
	width: 100%;
}

input[type=range]::-ms-track {
	background: transparent;
	border-color: transparent;
	border-width:025em 0;
	color: transparent;
	height: .25em;
	width: 100%;
}

@media screen and (-ms-high-contrast: active) {
	input[type=range]::-ms-track {
		border: 0;
		margin: 1em 0;
	}
}

input[type=range]::-ms-fill-lower {
	background: #eee;
	border: 1px solid #999;
	border-radius: 4px;
}

input[type=range]::-ms-fill-upper {
	background: #eee;
	border: .025rem solid #999;
	border-radius: 50%;
}


/**
 * Focus Styles
 */
input[type=range]:focus {
	outline: 0;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #007dc3;
}

input[type=range]::-moz-focus-outer {
	border: 0;
}

input[type=range]:focus::-moz-range-track {
	background: #007dc3;
}

input[type=range]:focus::-ms-fill-lower {
	background: #007dc3;
}

input[type=range]:focus::-ms-fill-upper {
	background: #007dc3;
}

input[type=range]:focus::-webkit-slider-thumb {
	background: #fff;
}

input[type=range]:focus::-moz-range-thumb {
	background: #fff;
}

input[type=range]:focus::-ms-thumb {
	background: #fff;
}


/**
 * Thumbs
 */
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: #eee;
	border: .032rem solid rgba(0,0,0,.35);
	border-radius: 50%;
	cursor: grab;
	height: 1.25em;
	margin: -.525em 0 0;
	position: relative;
	width: 1.25em;
	z-index: 3;
}

input[type=range][disabled]::-webkit-slider-thumb {
	cursor: not-allowed;
}

input[type=range]::-moz-range-thumb {
	background: #eee;
	border: .0025rem solid rgba(0,0,0,.5);
	border-radius: 50%;
	cursor: grab;
	height: 1.125em;
	position: relative;
	width: 1.125em;
	z-index: 3;
}

input[type=range][disabled]::-moz-range-thumb {
	cursor: not-allowed;
}

/**
 * Edge respects the webkit styling here (odd), but
 * IE11 doesn't (correct). To get both browsers
 * to be correctly styled, this is still necessary
 * and the negative margin of the webkit styling
 * needs to be removed.
 */
input[type=range]::-ms-thumb {
	background: #eee;
	border: .025rem solid rgba(0,0,0,.5);
	border-radius: 50%;
	cursor: grab; /* ms doesn't currently support */
	height: 1.825em;
	margin: 0;
	position: relative;
	width: 1.125em;
	z-index: 3;
}

input[type=range][disabled]::-ms-thumb {
	cursor: not-allowed;
}


/**
 * When a user specifically 'grabs' the
 * thumb/knob/whatever, change the cursor
 * to the active state.
 */
input[type=range]:not([disabled])::-webkit-slider-thumb:active {
	cursor: grabbing;
}
input[type=range]:not([disabled])::-moz-range-thumb:active {
	cursor: grabbing;
}
input[type=range]:not([disabled])::-ms-thumb:active {
	cursor: grabbing; /* ms doesn't currently support */
}