/* ================================== */
/* CSS for control sap.m/RangeSlider  */
/* Horizon theme                      */
/* ================================== */

@_sap_m_RangeSlider_Handle_Height: 1.5rem;
@_sap_m_RangeSlider_Handle_Width: 2rem;
@_sap_m_RangeSlider_Handle_Height_Compact: 1.25rem;
@_sap_m_RangeSlider_Handle_Width_Compact: 1.5rem;

.sapMRangeSlider.sapMSlider .sapMSliderInner {
	&:not(.sapMSliderInnerDisabled).sapMSliderProgress:hover ~ .sapMSliderHandle,
	.sapMSliderHandle:hover  {
		border: 0.0625rem @sapContent_FocusStyle @sapUiSliderHoverHandleBorderColor;
		background: @sapUiSliderHoverRangeHandleBackground;
	}

	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
		&:not(:focus) {
			background: transparent;
			border: 0.125rem solid @sapUiContentFocusColor;
			outline: none;
			box-shadow: none;
			top: -0.625rem;
		}
	}

	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
		background: @sapUiSliderActiveRangeHandleBackground;
		border: 0.125rem solid @sapUiContentFocusColor;
		outline: none;
		box-shadow: none;
		top: -0.625rem;
	}

	.sapMSliderHandle {
		background: @sapUiSliderRangeHandleBackground;
		top: -0.625rem;
	}

	.sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
		top: 4px;
	}
}

.sapMRangeSlider .sapMSliderInner::before {
	border: 0.0625rem solid @sapUiContentMeasureIndicatorColor;
	background-color: @sapUiContentMeasureIndicatorColor;
}

.sapMRangeSlider .sapMSliderLabels {
	width: 100%;
	position: absolute;
	top: 2.125rem;
}

.sapMRangeSlider .sapMSliderTickLabel .sapMSliderLabel {
	top: 1rem;
}

.sapMRangeSlider .sapMSliderRangeLabel {
	padding-top: 0.4375rem;
}

.sapUiSizeCompact {
	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
		&:not(:focus) {
			background: transparent;
			border: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
			outline: none;
			box-shadow: none;
			top: -0.5rem;
		}
	}

	.sapMRangeSlider .sapMSliderLabels {
		margin: 0 -0.875rem;
	}

	.sapMRangeSlider .sapMSliderRangeLabel {
		padding-top: 0.375rem;
	}

	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
		background: @sapUiSliderActiveRangeHandleBackground;
		border: 0.125rem solid @sapUiContentFocusColor;
		outline: none;
		box-shadow: none;
		top: -0.5rem;
	}

	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle {
		top: -0.5rem;
	}

	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
		top: 2px;
		right: 0.25rem;
	}

	.sapMSliderLabels {
		margin: 0.625rem -0.875rem 0 -0.875rem;
	}
}

html.sap-desktop .sapMSliderProgress:focus:before {
	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
	border-radius: 0.5rem;
	content: "";
	display: block;
	position: absolute;
	height: ~"calc(@{_sap_m_RangeSlider_Handle_Height} + 0.375rem)";
	width: ~"calc(100% + ((@{_sap_m_RangeSlider_Handle_Width}) + 0.375rem))";
	top: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Height} / 2) + 0.1875rem))";
	left: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Width} / 2) + 0.3125rem))";
}

html.sap-desktop .sapUiSizeCompact .sapMSliderProgress:focus:before {
	height: ~"calc(@{_sap_m_RangeSlider_Handle_Height_Compact} + 0.375rem)";
	width: ~"calc(100% + ((@{_sap_m_RangeSlider_Handle_Width_Compact}) + 0.375rem))";
	top: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Height_Compact} / 2) + 0.1875rem))";
	left: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Width_Compact} / 2) + 0.3125rem))";
}