/* The root class of the Slider */
.root {
}

/* Added to the output when rendered as a tooltip */
.outputTooltip {
	left: 2.5em;
	position: absolute;
	top: 2.5em;
}

/* vertical slider */
.vertical .input,
.vertical .track {
	transform-origin: 0 0;
	transform: rotate(-90deg) translate(-100%, 0);
}

/* disabled and readonly styles */
.disabled .track,
.readonly .track {
	background-color: var(--disabled-color);
}

/* invalid style */
.invalid .track {
	border-color: var(--error-color);
}
.invalid .thumb::before {
	background-color: var(--error-color);
}

/* valid style */
.valid .inputWrapper::before {
	border-color: var(--success-color);
}
.valid .inputWrapper::after {
	background-color: var(--success-color);
}

/* Added to a focused Slider */
.focused {
}

/* Contains the input */
.inputWrapper {
}

/* Styles the input when the Slider is focused */
.focused .input {
	outline: none;
}

/* Styles the thumb when the Slider if focused */
.focused .thumb {
	box-shadow: 0 0 7px 3px var(--selected-background);
	border-color: white;
}

/* Added to the track of the slider */
.track {
	background-color: var(--component-background);
	border: 1px solid var(--component-color);
	height: 0.75em;
}

/* Indicates the filled portion of the track */
.fill {
	background-color: var(--selected-background);
}

/* Added to the input */
.input {
	height: 0.75em;
}

/* Styles the thumb in IE */
.input::-ms-thumb {
	height: 2em;
	width: 2em;
}

/* Styles the thumb in FF */
.input::-moz-range-thumb {
	height: 2em;
	width: 2em;
}

/* Styles the thumb in Safari */
.input::-webkit-slider-thumb {
	height: 2em;
	width: 2em;
}

/* Added to the thumb */
.thumb {
	background-color: var(--component-background);
	border: 1px solid var(--component-color);
	height: 2em;
	left: 50%;
	margin-left: -1em;
	top: -0.625em;
	width: 2em;
}

/* Added to the output text */
.output {
}
