/* ================================== */
/* 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 var(--sapContent_FocusStyle) var(--sapSlider_Hover_HandleBorderColor);
		background: var(--sapSlider_Hover_RangeHandleBackground);
	}

	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {

		&:not(:focus) {
			background: transparent;
			border: 0.125rem solid var(--sapContent_FocusColor);
			outline: none;
			box-shadow: none;
			top: -0.625rem;
		}
	}

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

	.sapMSliderHandle {
		background: var(--sapSlider_RangeHandleBackground);
		top: -0.625rem;
	}

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

.sapMRangeSlider .sapMSliderInner::before {
	border: 0.0625rem solid var(--sapContent_MeasureIndicatorColor);
	background-color: var(--sapContent_MeasureIndicatorColor);
}

.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: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
			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: var(--sapSlider_Active_RangeHandleBackground);
		border: 0.125rem solid var(--sapContent_FocusColor);
		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: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	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))";
}