.xh-panel {
  background-color: var(--xh-panel-bg);

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

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

    & > .xh-icon {
      margin: 0 5px 0 0;
    }

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