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

.sapUshellShellHeader {
  background-color: @sapUiShellColor;
  height: 3.25rem;
  line-height: 2.75rem;
}

/** ShellHeadItems **/

.sapUshellShellHeadItm {
  color: @sapUiShellInteractiveTextColor;
  border-color: @sapUiButtonLiteBorderColor;
  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 @sapUiButtonLiteBorderColor;
  outline-offset: -0.2375rem;
  box-shadow: none;
}

.sapUshellShellHeadItm:hover > .sapUshellShellHeadItmCntnt {
  box-shadow: @sapUiContentInteractionShadow;
  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,
.sapUshellShellHeadItm:focus:active > .sapUshellShellHeadItmCntnt,
.sapUshellShellHeadItm:focus-visible:active > .sapUshellShellHeadItmCntnt {
  color: @sapUiShellActiveTextColor;
  background-color: @sapUiShellActiveBackground;
  border-color: @sapUiButtonLiteActiveBorderColor;
  box-shadow: none;
  outline: none;
}

// If a ShellHeadItem is selected
.sapUshellShellHeadItmSel {
  background-color: @sapUiHighlight;
}

.sapUshellShellHeadItm.sapUshellShellHeadItmSel {
  background-color: @sapUiShellActiveBackground;
  color: @sapUiShellActiveTextColor;
}

/** Logo **/

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

// hide the dotted outline if the Logo is focused
.sapUshellShellIco:focus {
  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiButtonLiteBorderColor;
}

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

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

#shell-header-logo:focus:not(:focus-visible) {
  background-color: @sapUiShellHoverBackground;
  border-color: @sapUiButtonLiteBorderColor;
}

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

#shell-header-logo:active,
#shell-header-logo:focus:active,
#shell-header-logo:focus-visible:active {
  color: @sapUiShellActiveTextColor;
  background-color: @sapUiShellActiveBackground;
  border-color: @sapUiButtonLiteActiveBorderColor;
  box-shadow: none;
  outline: none;
}

/** UserActionsMenu Button (Avatar) **/
.sapUshellShellHeader {
  #userActionsMenuHeaderButton {
    border: 1px @sapDefault_BorderStyle @sapUiButtonLiteBorderColor;
    box-shadow: none;
  }

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

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

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

  #userActionsMenuHeaderButton:active,
  #userActionsMenuHeaderButton:focus:active,
  #userActionsMenuHeaderButton:focus-visible:active {
    color: @sapUiShellActiveTextColor;
    border-color: @sapUiButtonLiteActiveBorderColor;
    box-shadow: none;
    outline: none;
  }
}
