/* ================================== */
/* CSS for control sap.m/WheelSlider  */
/* Evening Horizon theme              */
/* ================================== */

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

.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: @sapUiActive;
			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: @sapUiActive;
					color: @sapUiContentContrastTextColor;
				}

			}
			.sapMWSSelectionFrame {
				border: 0.125rem solid @sapUiSelected;
				border-radius: 0.25rem;
				outline:none;
				&:hover {
					+ ul > li.sapMWSItem.sapMWSItemSelected {
						background: @_sap_m_TimePicker_ItemHoverColor;
					}
				}
				&:active {
					& + ul > li.sapMWSItem.sapMWSItemSelected {
						background: @sapUiActive;
						color: @sapUiContentContrastTextColor;
					}
				}
			}
		}
	}
}

.sapUiSizeCompact .sapMWS {
	.sapMWSLabel,
	.sapMWSInner {
		.sapMWSItem,
		.sapMWSSelectionFrame,
		.sapMWSExpanded {
			width: 3rem;
		}
		width: 3rem;
		height: 2rem;
	}
}

.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 @sapUiSelected;
					outline-offset: -0.188rem;
				}
			}
		}
	}
}