input[type=range] {
	-webkit-appearance: none;
	-moz-appearance: none;

	border: none;
	border-radius: rem(12px) !important;
	background: transparent;

	cursor: pointer;
	width: 100%;
}

// Focus
input[type=range]:focus {
	outline: none;
}


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

// Track
input[type=range]::-webkit-slider-runnable-track {
	height: 6px;
	background: rgba($dark, 0.08);
	border: none;
	border-radius: rem(4px);
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 8px;
	background: rgba($dark, 0.08);
	border: none;
	border-radius: rem(4px);
}

input[type=range]::-ms-track {
	background: transparent;
	border-radius: rem(4px);
	border-color: transparent;
	border-width: 6px 0;
	color: transparent;
	height: 8px;
	width: 100%;
}

input[type=range]::-ms-fill-lower {
	background: rgba($dark, 0.08);
	border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
	background: rgba($dark, 0.08);
	border-radius: 10px;
}

// Thumb
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;

	height: 28px;
	width: 28px;
	border-radius: 50%;
	border: 3px solid $light-extra;
	background: $primary-color;
	box-shadow: 0 0 1px $font-color-medium;
	margin-top: -11px;
}

input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;

	height: 28px;
	width: 28px;
	border-radius: 50%;
	border: 3px solid $light-extra;
	background: $primary-color;
	box-shadow: 0 0 1px $font-color-medium;
}

input[type=range]::-ms-thumb {
	height: 16px;
	width: 16px;
	border-radius: 50%;
	border: 3px solid $light-extra;
	background: $primary-color;
	box-shadow: 0 0 1px $font-color-medium;
}

// Tooltip
.a-input--range__tooltip {
	transform: translate(50%, 50%);
	padding-left: 1rem;
	left: auto !important;
	right: -0.35rem;
	top: rem(12px);
	z-index: -1;
	position: absolute !important;
	width: 4rem;
	text-align: center;

	transition: opacity 300ms ease-in-out;
	opacity: 0;
}

.a-input--range__tooltip:before {
	left: 50% !important;
}