/* ============================================ */
/* CSS for control sap.uxap/HierarchicalSelect  */
/* Belize theme                                 */
/* ============================================ */

html.sap-desktop .sapUxAPHierarchicalSelect {
	border: none;
	background-color: transparent;

	&.sapMSltHoverable {
		border: none;

		&:hover {
			background: transparent;
		}

		&.sapMSltIconOnly.sapMSlt.sapMSltFocused  {
			outline: none;
			> .sapMSltIcon {
					outline: 1px dotted @sapUiContentFocusColor;
					outline-offset: -1px;
				}
		}

		&.sapMSltIconOnly.sapMSltPressed.sapMSlt.sapMSltFocused > .sapMSltIcon {
			outline: none;
		}

		&:not(.sapMSltPressed):hover > .sapMSltIcon {
			background-color: @sapUiButtonLiteHoverBackground;
			border-color: @sapUiButtonLiteHoverBorderColor;
		}
	}

	&.sapMSltPressed {

		&.sapMSltIconOnly:not(.sapMSltDisabled),
		&.sapMSltIconOnly:not(.sapMSltState):hover {
			background: transparent;
		}

		> .sapMSltIcon {
			background: @sapUiButtonLiteActiveBackground;
			color: @sapUiButtonActiveTextColor;
		}
	}

	.sapMSltLabel,
	.sapMSltArrow {
		font-size: @sapMFontHeader6Size;
		color: @sapUiGroupTitleTextColor;
	}

	.sapMSltIcon {
		background: @sapUiButtonLiteBackground;
		color: @sapUiButtonIconColor;
	}
}

/* mobile-only: appears in a dialog */
.sapMSltPicker .sapUxAPHierarchicalSelect.sapMIBar.sapMHeader-CTX,
.sapMSltPicker .sapUxAPHierarchicalSelect.sapMSltBar::after {
	background: @sapUiObjectHeaderBackground;
	border: none;
}

.sapMSltPicker .sapUxAPHierarchicalSelect.sapMSltBar::after {
	color: @sapUiContentIconColor;
}

.sapUxAPHierarchicalSelectFirstLevel.sapMSelectListItem:not(:first-child) {
	border-top: 1px solid @sapUiListBorderColor;
}

.sapUxAPHierarchicalSelectSecondLevel.sapMSelectListItem {
	color: @sapUiContentLabelColor;
}

.sapUxAPHierarchicalSelectFirstLevel.sapMSelectListItem,
.sapUxAPHierarchicalSelectSecondLevel.sapMSelectListItem {
	font-size: @sapMFontMediumSize;
}

.sapUxAPHierarchicalSelect .sapMSltPicker-CTX .sapMSelectList {
	border: 1px solid darken(@sapUiContentForegroundBorderColor, 15);
}

/* hover */
.sapUxAPHierarchicalSelect .sapMSelectListItemSelected:hover {
	background: @sapUiListSelectionHoverBackground;
}

/* styling needed to achieve underline of the select label on phone */
html .sapUxAPObjectPageLayout-Std-Phone, html.sap-phone {
	.sapMSltPressed > .sapMSltArrow {
		background: @sapUiFieldActiveBackground;
	}

	.sapMSltPressed > .sapMSltArrow::before {
		color: @sapUiContentContrastIconColor;
	}

	.sapUxAPHierarchicalSelect .sapMSltLabel {
		border-bottom: 0.125rem solid @sapUiSelected;
	}

	.sapUxAPHierarchicalSelect .sapMSltArrow {
		box-shadow: inset 0 -0.125rem @sapUiObjectHeaderBorderColor, 0 0.125rem 0 0 @sapUiObjectHeaderBackground;
	}

	.sapMSlt.sapUxAPHierarchicalSelect.sapMBarChild {
		box-shadow: inset 0 -0.125rem @sapUiObjectHeaderBorderColor, 0 0.125rem 0 0 @sapUiObjectHeaderBackground;
		background-color: transparent;
	}
}

/* styling needed to achieve underline of the select label on phone on Android 4.4.2
(this is specific for webview (Fiori client) and Chrome browser) */
html[data-sap-ui-browser^="cr4"] .sapUxAPObjectPageLayout-Std-Phone,
html[data-sap-ui-browser^="cr4"].sap-phone {
	.sapUxAPHierarchicalSelect .sapMSltLabel {
		box-shadow: inset 0 -0.125rem @sapUiSelected;
	}
}

html[data-sap-ui-browser^="ie"].sap-desktop,
html[data-sap-ui-browser^="ed"].sap-desktop {
	.sapUxAPHierarchicalSelect.sapMSltHoverable.sapMSltIconOnly.sapMSlt.sapMSltFocused:not(.sapMSltPressed) {
		&::before {
			border: none;
		}
		&> .sapMSltIcon {
			outline: none;
			border: 0.0625rem dashed @sapUiContentFocusColor;
		}
	}
}