/* ========================================= */
/* CSS for control sap.ushell/ShellAppTitle  */
/* Morning Horizon theme                     */
/* ========================================= */

/** All my Apps Popover **/

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

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

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

#shellAppTitle {
	color: var(--sapShell_TextColor);
	outline: none;
}

.sapUshellAppTitle {
	line-height: 2.1875rem;
	outline: none;
}

#shellAppTitle-button {
	margin: 0.25rem;
	height: 2.25rem;
	border-radius: .375rem;
	outline-offset: -0.2375rem;
	box-shadow: none;
	border: 1px @sapDefault_BorderStyle var(--sapButton_Lite_BorderColor);
}

/* On mobile Portrait Mode the arrow down button is only shown without text (only one child) */
#shellAppTitle-button > span:only-child {
	min-width: 1rem;
}

/* Arrow Down Button if the AllMyApps Feature is enabled */
.sapUshellShellHeadAction {
	color: var(--sapShell_InteractiveTextColor);
}

#shellAppTitle.sapUshellAppTitleClickable {
	outline: none;
}

#shellAppTitle.sapUshellAppTitleClickable:hover > #shellAppTitle-button,
#shellAppTitle.sapUshellAppTitleClickable > #shellAppTitle-button:hover,
#shellAppTitle.sapUshellAppTitleClickable:hover > #shellAppTitle-button:focus-within {
	box-shadow: var(--sapContent_Interaction_Shadow);
	background-color: var(--sapShell_Hover_Background);
}

#shellAppTitle.sapUshellAppTitleClickable > #shellAppTitle-button:focus:not(:focus-within) {
	outline-color: transparent;
}

#shellAppTitle.sapUshellAppTitleClickable > #shellAppTitle-button:focus-within {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	box-shadow: none;
}

#shellAppTitle.sapUshellAppTitleClickable:active > #shellAppTitle-button,
#shellAppTitle.sapUshellAppTitleClickable > #shellAppTitle-button:active,
#shellAppTitle.sapUshellAppTitleClickable > #shellAppTitle-button:focus-within:active {
	color: var(--sapShell_Active_TextColor);
	background-color: var(--sapButton_Active_Background);
	border: 1px @sapDefault_BorderStyle var(--sapButton_Lite_Active_BorderColor);
	box-shadow: none;
	outline: none;
}

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

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

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

.sapUshellNavigationMenuListItems:not(:first-child) .sapMLIBContent::before {
	background-color: 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);
}