/* ================================== */
/* CSS for control sap.m/RangeSlider  */
/* Fiori 3 theme                      */
/* ================================== */

/* overlap */
.sapMSliderHandle.sapMSliderHandleOverlap {
	border: 0.125rem solid darken(@sapUiFieldActiveBorderColor, 5);
}

.sapMRangeSlider.sapMSlider {

	.sapMSliderLabels {
		height: 1rem;

		.sapMSliderRangeLabel {
			width: 2rem;
			font-size: var(--sapFontSmallSize);
			color: var(--sapContent_LabelColor);
		}
	}

	.sapMSliderInner .sapMSliderHandle {
		background: fade(@sapUiButtonBackground, 25);
	}

	.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle {

		&:hover {
			background-color: transparent;
			border-color: var(--sapButton_Hover_BorderColor);
		}

		&:active {
			background: transparent;
			border-color: var(--sapButton_Active_BorderColor);
		}

		&.sapMSliderHandlePressed {
			background: transparent;
			border-color: var(--sapButton_Active_BorderColor);
		}
	}

	.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderProgress:hover ~ .sapMSliderHandle,
	.sapMSliderHandle:hover {
		background-color: fade(@sapUiButtonHoverBackground, 25);
		border-color: var(--sapButton_Hover_BorderColor);
	}
}