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

.sapUshellShellHeader {
	background-color: var(--sapShellColor);
	height: 3.25rem;
	line-height: 2.75rem;
}

/** ShellHeadItems **/

.sapUshellShellHeadItm {
	color: var(--sapShell_InteractiveTextColor);
	border-color: var(--sapButton_Lite_BorderColor);
	line-height: 2.1875rem;
	outline: none;
	box-shadow: none;
}

.sapUshellShellHeadItm:focus {
	outline: none;
}

/* Content (Icon) inside a ShellHeadItem */
.sapUshellShellHeadItmCntnt {
	margin: 0.25rem;
	border-radius: .375rem;
	border: 1px @sapDefault_BorderStyle var(--sapButton_Lite_BorderColor);
	outline-offset: -0.2375rem;
	box-shadow: none;
}

.sapUshellShellHeadItm:hover > .sapUshellShellHeadItmCntnt {
	box-shadow: var(--sapContent_Interaction_Shadow);
	background-color: var(--sapShell_Hover_Background);
}

.sapUshellShellHeadItm:focus:not(:focus-visible) > .sapUshellShellHeadItmCntnt {
	background-color: var(--sapShell_Hover_Background);
	border-color: var(--sapButton_Lite_BorderColor);
}

.sapUshellShellHeadItm:focus-visible > .sapUshellShellHeadItmCntnt {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}

.sapUshellShellHeadItm:active > .sapUshellShellHeadItmCntnt,
.sapUshellShellHeadItm:focus:active > .sapUshellShellHeadItmCntnt,
.sapUshellShellHeadItm:focus-visible:active > .sapUshellShellHeadItmCntnt {
	color: var(--sapShell_Active_TextColor);
	background-color: var(--sapShell_Active_Background);
	border-color: var(--sapButton_Lite_Active_BorderColor);
	box-shadow: none;
	outline: none;
}

/* If a ShellHeadItem is selected */
.sapUshellShellHeadItmSel {
	background-color: var(--sapHighlightColor);
}

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

/** Logo **/

/* CSS class for the Logo control itself. */
.sapUshellShellIco {
	height: inherit;
}

/* hide the dotted outline if the Logo is focused */
.sapUshellShellIco:focus {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapButton_Lite_BorderColor);
}

/* The logo control itself, places its content (logo image) vertically centered. */
#shell-header-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: .375rem;
	border: 1px @sapDefault_BorderStyle var(--sapButton_Lite_BorderColor);
	margin: .25rem 0;
	outline-offset: -0.2375rem;
}

#shell-header-logo:hover {
	box-shadow: var(--sapContent_Interaction_Shadow);
	background-color: var(--sapShell_Hover_Background);
}

#shell-header-logo:focus:not(:focus-visible) {
	background-color: var(--sapShell_Hover_Background);
	border-color: var(--sapButton_Lite_BorderColor);
}

#shell-header-logo:focus-visible {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
}

#shell-header-logo:active,
#shell-header-logo:focus:active,
#shell-header-logo:focus-visible:active {
	color: var(--sapShell_Active_TextColor);
	background-color: var(--sapShell_Active_Background);
	border-color: var(--sapButton_Lite_Active_BorderColor);
	box-shadow: none;
	outline: none;
}

/** UserActionsMenu Button (Avatar) **/
.sapUshellShellHeader {

	#userActionsMenuHeaderButton {
		border: 1px @sapDefault_BorderStyle var(--sapButton_Lite_BorderColor);
		box-shadow: none;
	}

	#userActionsMenuHeaderButton:hover {
		box-shadow: var(--sapContent_Interaction_Shadow);
	}

	#userActionsMenuHeaderButton:focus:not(:focus-visible) {
		border-color: var(--sapButton_Lite_BorderColor);
		outline: none;
	}

	#userActionsMenuHeaderButton:focus-visible {
		outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	}

	#userActionsMenuHeaderButton:active,
	#userActionsMenuHeaderButton:focus:active,
	#userActionsMenuHeaderButton:focus-visible:active {
		color: var(--sapShell_Active_TextColor);
		border-color: var(--sapButton_Lite_Active_BorderColor);
		box-shadow: none;
		outline: none;
	}
}