/* ================================= */
/* CSS for control sap.m/TimePickerSliders  */
/* Belize theme                      */
/* ================================= */

@_sap_m_TimePickerSliders_ItemColor: lighten(@sapUiContentForegroundColor, 5);
@_sap_m_TimePickerSliders_ItemHoverColor: darken(@sapUiContentForegroundColor, 5);
@_sap_m_TimePickerSliders_ItemBorderColor: lighten(@sapUiListBorderColor, 10);

/* ======================================== */
/* TimePicker Dropdown                      */
/* ======================================== */

.sapMTimePickerContainer {
	.sapMTPColumn {
		.sapMTimePickerSlider {
			.sapMTimePickerItem {
				border: 1px solid @_sap_m_TimePickerSliders_ItemBorderColor;
				&:hover {
					background: darken(@sapUiSelected, 10);
				}
			}
		}
		&.sapMTPSliderExpanded {
			.sapMTimePickerSlider {
				.sapMTimePickerItem {
					background: @_sap_m_TimePickerSliders_ItemColor;
					border: 1px solid @_sap_m_TimePickerSliders_ItemBorderColor;
					&:hover {
						background: @_sap_m_TimePickerSliders_ItemHoverColor;
					}
					&:active {
						background: @sapUiHighlight;
						color: @sapUiContentContrastTextColor;
					}

				}
				.sapMTPPickerSelectionFrame {
					outline: 0.125rem solid @sapUiSelected;
					outline-offset: -0.188rem;
					&:hover {
						+ ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
							background: @_sap_m_TimePickerSliders_ItemHoverColor;
						}
					}
					&:active {
						& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
							background: @sapUiSelected;
							color: @sapUiContentContrastTextColor;
						}
					}
				}
			}
		}
	}

	.sapMTPDisabled {
		opacity: 0.5;
	}
}

/* PHONE STYLES */
.sap-phone {
	/* ======================================== */
	/* TimePicker Dropdown                      */
	/* ======================================== */

	.sapMTimePickerContainer {
		.sapMTPColumn {
			.sapMTimePickerSlider {
				.sapMTimePickerItem {
					border: 1px solid @_sap_m_TimePickerSliders_ItemBorderColor;
				}
			}
			&.sapMTPSliderExpanded {
				.sapMTimePickerSlider {
					.sapMTimePickerItem {
						background: @_sap_m_TimePickerSliders_ItemColor;
						border: 1px solid @_sap_m_TimePickerSliders_ItemBorderColor;
					}
					.sapMTPPickerSelectionFrame {
						outline: 0.125rem solid @sapUiSelected;
						outline-offset: -0.188rem;
					}
				}
			}
		}
	}
}