/* ============================================================= */
/* CSS for control "sap.ushell.ui.ShellHeader" (sap_horizon_hcw) */
/* ============================================================= */

.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 **/

.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) **/
.sapUshellShellHeader {
  #userActionsMenuHeaderButton {
    border: 1px @sapDefault_BorderStyle @sapUiShellInteractiveBorderColor;
  }

  #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;
  }
}
