// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.

.form-range- {
	&:focus {
		// Pseudo-elements must be split across multiple rulesets to have an effect.
		// No box-shadow() mixin for focus accessibility.
		&::-webkit-slider-thumb { box-shadow: var(--kt-form-range-thumb-focus-box-shadow); }
		&::-moz-range-thumb     { box-shadow: var(--kt-form-range-thumb-focus-box-shadow); }
	}

	&::-webkit-slider-thumb {
		@include gradient-bg(var(--kt-form-range-thumb-bg));
		border: var(--kt-form-range-thumb-border);
		//@include box-shadow(var(--kt-form-range-thumb-box-shadow));
		appearance: none;

		&:active {
			@include gradient-bg(var(--kt-form-range-thumb-active-bg));
		}
	}

	&::-webkit-slider-runnable-track {
		background-color: var(--kt-form-range-track-bg);
		//@include box-shadow(var(--kt-form-range-track-box-shadow));
	}

	&::-moz-range-thumb {
		@include gradient-bg(var(--kt-form-range-thumb-bg));
		border: var(--kt-form-range-thumb-border);
		//@include box-shadow(var(--kt-form-range-thumb-box-shadow));

		&:active {
			@include gradient-bg(var(--kt-form-range-thumb-active-bg));
		}
	}

	&::-moz-range-track {
		background-color: var(--kt-form-range-track-bg);
		//@include box-shadow(var(--kt-form-range-track-box-shadow));
	}

	&:disabled {
		&::-webkit-slider-thumb {
			background-color: var(--kt-form-range-thumb-disabled-bg);
		}

		&::-moz-range-thumb {
			background-color: var(--kt-form-range-thumb-disabled-bg);
		}
	}
}
