.xh-panel-header {
  align-items: center;
  flex: none;
  user-select: none;
  height: var(--xh-title-height-px);
  padding: var(--xh-title-pad-px);
  background-color: var(--xh-panel-title-bg);
  color: var(--xh-panel-title-text-color);

  &__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--xh-panel-title-font-family);
    font-size: var(--xh-panel-title-font-size-px);

    &__inner {
      display: flex;
      flex: 1;
    }
  }

  &__items {
    align-items: center;

    > :not(:last-child) {
      margin-right: var(--xh-tbar-item-pad-px);
    }
  }

  // Header glyph.
  & > .svg-inline--fa {
    font-size: var(--xh-title-icon-size-px);
    margin: 0 var(--xh-pad-px) 0 var(--xh-pad-half-px);
  }

  // Header "tool" buttons.
  .xh-button--minimal.xh-button--intent-none {
    color: var(--xh-panel-title-text-color) !important;
  }

  // Ensure text color correct for Blueprint controls, e.g. a switch in headerItems
  .bp6-control {
    color: var(--xh-panel-title-text-color);
  }

  // Vertical mode - collapsed to left or right
  &.xh-vbox {
    width: var(--xh-title-height-px);

    & > .xh-icon {
      margin: var(--xh-pad-px) 0 0 0;
    }

    .xh-panel-header__title {
      height: 100%;

      &__inner {
        display: block;
        flex: none;
        margin-top: 50%;
        transform: rotate(90deg);
        height: calc(1em + 5px);
      }
    }

    &.xh-panel-header--left .xh-panel-header__title__inner {
      transform: rotate(270deg);
    }
  }

  // Compact mode
  &--compact {
    height: var(--xh-title-compact-height-px);
    font-size: var(--xh-title-compact-font-size-px);
    padding: 0 0 0 var(--xh-pad-half-px);

    .xh-panel-header__title {
      font-size: var(--xh-title-compact-font-size-px);
    }

    &.xh-vbox {
      padding: var(--xh-pad-half-px) 0 0 0;
      width: var(--xh-title-compact-height-px);
    }
  }
}