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

// Shell header in general
.sapUshellShellHeader {
  height: 3.25rem;
  line-height: 2.75rem;
  box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
}

/** ShellHeadItems **/

.sapUshellShellHeadItm {
  color: @sapUiShellInteractiveTextColor;
  line-height: 2.25rem;
  outline: none;
}

.sapUshellShellHeadItm:focus {
  outline: none;
}

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

.sapUshellShellHeadItm:hover>.sapUshellShellHeadItmCntnt {
  background-color: @sapUiShellHoverBackground;
}

.sapUshellShellHeadItm:focus:not(:focus-visible)>.sapUshellShellHeadItmCntnt {
  background-color: @sapUiShellHoverBackground;
  border-color: @sapUiButtonLiteBorderColor;
}

.sapUshellShellHeadItm:focus-visible>.sapUshellShellHeadItmCntnt {
  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
}

.sapUshellShellHeadItm:active>.sapUshellShellHeadItmCntnt {
  background-color: @sapUiButtonHoverBackground;
}

// Badge
.sapUshellShellHeadItmCounter:after {
  border-color: @sapUiGroupContentBorderColor;
}

/** Logo **/

// Image of the Logo Control
#shell-header-icon {
  max-height: 2rem;
}

.sapUshellShellIco {
  height: inherit;
}

// 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 @sapUiShellBorderColor;
  margin: .25rem 0;
  outline-offset: -0.25rem;
}

#shell-header-logo:hover {
  background-color: @sapUiShellHoverBackground;
}

#shell-header-logo:focus:not(:focus-visible) {
  outline-color: transparent;
}

#shell-header-logo:focus-visible {
  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
}

#shell-header-logo:active {
  background-color: @sapUiShellActiveBackground;
}

/** UserActionsMenu Button (Avatar) **/

#userActionsMenuHeaderButton {
  border: 1px @sapDefault_BorderStyle @sapUiShellInteractiveBorderColor;
  outline-offset: 1px;
}

#userActionsMenuHeaderButton:hover {
  box-shadow: @sapUiContentInteractionShadow;
  background-color: @sapUiShellActiveBackground;
}

#userActionsMenuHeaderButton:focus:not(:focus-visible) {
  outline: none;
}

#userActionsMenuHeaderButton:focus-visible {
  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
  box-shadow: none;
}

#userActionsMenuHeaderButton:active {
  background-color: @sapUiShellActiveBackground;
}