/* ======================================= */
/* CSS for control sap.ushell/ShellHeader  */
/* Quartz Light theme                      */
/* ======================================= */

.sapUshellShellHeader {
	background-color: var(--sapShellColor);
}

/* sapUshellFixedPadding is used to add more specificty
   and overwrite the responsive styling of the component */
.sapUshellShellHeader.sapUshellFixedPadding {
	padding-left: 0.375rem !important; /* aligns SideNavigation panel and button for Quartz theme */
}

.sapUshellShellIco:focus,
#userActionsMenuHeaderButton:focus,
.sapUshellShellHeadItm:focus {
	outline-color: var(--sapContent_ContrastFocusColor);
}

/* New Design Switch - focus color in the header */
html.sap-desktop .sapUshellShellHeader .sapMSwtCont:focus > .sapMSwt::before {
	outline-color: var(--sapContent_ContrastFocusColor);
}

.sapUshellShellHeadBegin .sapUshellShellIco:hover {
	background-color: var(--sapShell_Hover_Background);
}

#shellAppTitle:focus-within {
	outline-color: var(--sapContent_ContrastFocusColor);
}

#allMyAppsView--sapUshellAllMyAppsDetailsPage {
	background: var(--sapList_Background);
	border-left: 1px solid var(--sapList_BorderColor);
}

#allMyAppsView--sapUshellAllMyAppsDetailsPage .sapMLIB {
	border-bottom: 0;
}

.sapUshellShellHeadItm {
	color: var(--sapShell_InteractiveTextColor);
}

.sapUshellShellHeadItmSel,
.sapUshellShellHeadItm:active {
	background-color: var(--sapHighlightColor);
}

.sapUshellShellHeadAction {
	color: var(--sapShell_InteractiveTextColor);
}

.sapUshellShellHeadItm.sapUshellShellHeadItmSel {
	background-color: var(--sapShell_Active_Background);
	color: var(--sapShell_Active_TextColor);
}

.sapUshellShellHeader .sapUshellShellHeadItm:hover {
	background-color: var(--sapShell_Hover_Background);
}

.sapUshellShellHeader .sapUshellShellHeadItm:active {
	background-color: var(--sapShell_Active_Background);
	color: var(--sapShell_Active_TextColor);
}

.sapUshellHeadTitle {
	color: var(--sapShell_TextColor);
}

/** ---------------------------------------- **/
/** Styles for Shell Title's Navigation Menu **/
/** ---------------------------------------- **/

.sapUshellAppTitle {
	color: var(--sapShell_TextColor);
}

.sapUshellAppTitleClickable:hover {
	background-color: var(--sapShell_Hover_Background);
}

.sapUshellAppTitleClickable:active {
	background-color: var(--sapShell_Active_Background);
}

.sapUshellAppTitleClickable:active .sapUshellShellHeadAction {
	color: var(--sapShell_Active_TextColor);
}

/** Hierarchy Items - (List Items) Icon Styles **/
.sapUshellNavigationMenuListItems {
	color: var(--sapList_Background);
}

.sapUshellNavigationMenuListItems:not(:last-child) .sapMLIBContent::after {
	background: var(--sapContent_NonInteractiveIconColor);
}

.sapUshellNavigationMenuListItems:not(:first-child) .sapMLIBContent::before {
	background: var(--sapContent_NonInteractiveIconColor);
}

/** Shell Navigation Menu - related Apps grid (within a flexbox) - override the text-tab-bar content area height **/
#sapUshellRelatedAppsItems {
	background-color: var(--sapBackgroundColor);
	border-top: 1px solid var(--sapList_BorderColor);
}

#sapUshellRelatedAppsItems label {
	font-size: 1rem;
}

/** Shell Navigation Menu - Mini Tiles (of relatedApps)**/
.sapUshellNavMiniTile {
	background-color: var(--sapTile_Background);
	box-shadow: 0 0 1px 0 var(--sapTile_BorderColor);
}

.sapUshellNavMiniTile:hover,
.sapUshellNavMiniTile:active {
	box-shadow: 0 0 0.125rem var(--sapTile_BorderColor);
}

.sapUshellNavMiniTileTitle,
.sapUshellNavMiniTileSubtitle {
	color: var(--sapList_TextColor);
}

.sapUshellNavMiniTileIcon {
	color: var(--sapBrandColor);
}