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

@_sap_m_TimePicker_ItemColor: darken(@sapUiListBackground, 3);
@_sap_m_TimePicker_ItemHoverColor: darken(@sapUiListBackground, 6);
@_sap_m_TimePicker_ItemBorderColor: var(--sapList_Background);

.sapMWS:not(:last-child),
.sapMWS.sapMWSExpanded:not(:last-child) {
	margin-right: 0.5rem;
}

.sapMWS {

	.sapMWSLabel,
	.sapMWSInner {
		width: 3rem;
		height: 2.875rem;

		.sapMWSItem,
		.sapMWSSelectionFrame {
			width: 3rem;
			height: 2.875rem;
		}

		.sapMWSItem {
			border-radius: 0.25rem;
			background: var(--sapActiveColor);
			border: 1px solid @_sap_m_TimePicker_ItemBorderColor;

			&:hover {
				background: darken(@sapUiSelected, 10);
			}
		}
	}

	&.sapMWSExpanded {

		.sapMWSInner {

			.sapMWSItem {
				background: @_sap_m_TimePicker_ItemColor;
				border: 1px solid @_sap_m_TimePicker_ItemBorderColor;

				&:hover {
					background: @_sap_m_TimePicker_ItemHoverColor;
				}

				&:active {
					background: var(--sapActiveColor);
					color: var(--sapContent_ContrastTextColor);
				}
			}

			.sapMWSSelectionFrame {
				border: 0.125rem solid var(--sapSelectedColor);
				border-radius: 0.25rem;
				outline:none;

				&:hover {

					+ ul > li.sapMWSItem.sapMWSItemSelected {
						background: @_sap_m_TimePicker_ItemHoverColor;
					}
				}

				&:active {

					& + ul > li.sapMWSItem.sapMWSItemSelected {
						background: var(--sapActiveColor);
						color: var(--sapContent_ContrastTextColor);
					}
				}
			}
		}
	}
}

.sapUiSizeCompact .sapMWS {

	.sapMWSLabel,
	.sapMWSInner {
		width: 3rem;
		height: 2rem;

		.sapMWSItem,
		.sapMWSSelectionFrame,
		.sapMWSExpanded {
			width: 3rem;
		}
	}
}

.sap-phone {

	.sapMWS {

		.sapMWSLabel,
		.sapMWSInner {
			width: 3rem;
			height: 2.875rem;

			.sapMWSItem,
			.sapMWSSelectionFrame {
				width: 3rem;
				height: 2.875rem;
			}

			.sapMWSItem {
				border: 1px solid @_sap_m_TimePicker_ItemBorderColor;
			}
		}

		&.sapMWSExpanded {

			.sapMWSInner {

				.sapMWSItem {
					background: @_sap_m_TimePicker_ItemColor;
					border: 1px solid @_sap_m_TimePicker_ItemBorderColor;
					width: 3rem;
				}

				.sapMWSSelectionFrame {
					outline: 0.125rem solid var(--sapSelectedColor);
					outline-offset: -0.188rem;
				}
			}
		}
	}
}