// Note both classes selected below to ensure higher specificity than .xh-toolbar alone.
.xh-appbar.xh-toolbar {
  display: flex;
  background-color: var(--xh-appbar-bg);
  color: var(--xh-appbar-title-color);
  padding: var(--xh-pad-half-px) var(--xh-pad-px) var(--xh-pad-half-px) 0;

  .xh-appbar-title {
    font-size: var(--xh-appbar-title-font-size-px);
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .xh-appbar-left,
  .xh-appbar-right {
    display: flex;
  }

  .xh-app-menu-button__user-profile {
    border-radius: 50%;
    border: 1px solid var(--xh-appbar-title-color);
    cursor: pointer;
    height: 28px;
    font-size: var(--xh-font-size-small-em);
    line-height: 27px;
    text-align: center;
    width: 28px;
  }

  .xh-button {
    background: transparent !important;
    color: var(--xh-appbar-title-color) !important;
  }
}