.xh-toolbar {
  padding: var(--xh-pad-half-px) var(--xh-pad-px) var(--xh-pad-half-px) var(--xh-pad-half-px);
  font-size: var(--xh-tbar-font-size-px);
  color: var(--xh-tbar-text-color);
  background-color: var(--xh-tbar-bg);
  width: 100%;
  flex: none;
  align-items: center;
  flex-wrap: nowrap;

  // Overflow box
  .bp6-overflow-list {
    flex: 1;
    align-items: center;

    > * {
      white-space: nowrap;

      // The overflow space needs to be able to shrink - BP checks this to determine overflow
      &:not(.bp6-overflow-list-spacer) {
        flex-shrink: 0;
      }

      &:not([class*='xh-no-pad']) {
        margin-left: var(--xh-tbar-item-pad-px);
      }
    }
  }

  // Non-overflow mode
  &:not(&--overflow) > * {
    white-space: nowrap;
    flex-shrink: 0;

    &:not([class*='xh-no-pad']) {
      margin-left: var(--xh-tbar-item-pad-px);
    }
  }

  &:not(&--vertical) {
    min-height: var(--xh-tbar-min-size-px);

    // Selected via not-last to account for panels, which dock a header above the tbar.
    &:not(:last-child) {
      border-bottom: 1px solid var(--xh-tbar-border-color);
    }

    &:last-child {
      border-top: 1px solid var(--xh-tbar-border-color);
    }

    .xh-toolbar__separator {
      border-left: 1px solid var(--xh-tbar-separator-color);
      height: 20px; // matches BluePrint navBarSeparator
      margin-left: calc(var(--xh-tbar-item-pad) * 2px);
      margin-right: var(--xh-tbar-item-pad-px);
    }
  }

  // Vertical mode
  &--vertical {
    width: var(--xh-tbar-min-size-px);
    padding: 0 var(--xh-pad-half-px) var(--xh-pad-px) var(--xh-pad-half-px);

    &:not(.xh-toolbar--overflow) > *:not([class*='xh-no-pad']) {
      margin-top: var(--xh-tbar-item-pad-px);
      margin-left: 0;
    }

    .xh-toolbar__separator {
      border-bottom: 1px solid var(--xh-tbar-separator-color);
      width: 20px;
    }

    &:first-child {
      border-right: 1px solid var(--xh-tbar-border-color);
    }

    &:last-child {
      border-left: 1px solid var(--xh-tbar-border-color);
    }
  }

  // Compact mode
  &--compact {
    font-size: var(--xh-tbar-compact-font-size-px);
    // Tighten up padding on edges and between items.
    padding-left: 0;
    padding-right: 2px;
    --xh-tbar-item-pad: 4;
    --xh-tbar-item-pad-px: 4px;

    &:not(.xh-toolbar--vertical) {
      min-height: unset;
      height: var(--xh-tbar-compact-min-size-px);

      .xh-toolbar__separator {
        height: 12px;
      }
    }

    &.xh-toolbar--vertical {
      width: var(--xh-tbar-compact-min-size-px);

      .xh-toolbar__separator {
        width: 12px;
      }
    }

    // Compact toolbar buttons
    .xh-app.xh-dark.bp6-dark &,
    .xh-app & {
      button.xh-button.bp6-button.xh-button--minimal,
      button.xh-button.bp6-button.xh-button--standard,
      button.xh-button.bp6-button.xh-button--outlined {
        padding: 3px var(--xh-pad-half-px);
        min-height: var(--xh-tbar-compact-item-height-px);
        max-height: var(--xh-tbar-compact-item-height-px);
        font-size: var(--xh-tbar-compact-font-size-px);

        svg:not(:last-child) {
          margin-right: 4px;
        }
      }
    }

    // Compact toolbar inputs
    .xh-input {
      max-height: var(--xh-tbar-compact-item-height-px);
      min-height: var(--xh-tbar-compact-item-height-px);

      .bp6-input-group {
        // This padding reserves space for a left-icon - default 30px overly wide in compact mode.
        .bp6-input:not(:first-child) {
          padding-left: 20px;
        }

        > input {
          max-height: var(--xh-tbar-compact-item-height-px);
          min-height: var(--xh-tbar-compact-item-height-px);
        }

        // Buttons inside other input elements
        .xh-button {
          max-height: var(--xh-tbar-compact-item-height-px);
          min-height: var(--xh-tbar-compact-item-height-px);
          margin: 0 !important;
        }

        // Inline input icons made smaller, lighter, and alignment tweaked.
        svg:not(.bp6-icon) {
          font-size: var(--xh-tbar-compact-font-size-px);
          margin: 5px 2px 5px 4px;
          opacity: 0.6;
        }
      }

      &.xh-switch-input {
        display: flex;
        align-items: center;

        .bp6-control-indicator {
          margin-top: 1px;
          margin-right: var(--xh-pad-half-px);
        }
      }

      &.xh-switch-input.bp6-align-right {
        flex-direction: row-reverse;
        padding-right: 0;
      }

      &.xh-select {
        display: flex;
        align-items: center;

        .xh-select__control {
          max-height: var(--xh-tbar-compact-item-height-px);
          min-height: var(--xh-tbar-compact-item-height-px);

          // Matched to other inline input icons (above).
          &__left-icon {
            font-size: var(--xh-tbar-compact-font-size-px);
            margin: 5px 2px 5px 4px;
            opacity: 0.6;
          }
        }

        .xh-select__value-container {
          max-height: var(--xh-tbar-compact-item-height-px);
          min-height: var(--xh-tbar-compact-item-height-px);

          // No need for padding if there is a leading leftIcon.
          &:not(:first-child) {
            padding-left: 0;
          }

          & > * {
            margin-top: 0;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
          }

          // Ensure multi-val tags fit w/o scrolling.
          .xh-select__multi-value__label {
            padding: 2px 0 0 4px;
          }
        }
      }
    }
  }

  // Form field margins (if set) are not desired within Toolbars.
  .bp6-control {
    margin-bottom: 0;

    &.bp6-inline {
      margin-right: 0;
    }
  }
}

.xh-toolbar-overflow-popover {
  border: 1px solid var(--xh-tbar-border-color);

  .bp6-popover-arrow-border,
  .bp6-popover-arrow-fill {
    fill: var(--xh-tbar-border-color) !important;
  }

  .bp6-popover-content {
    color: var(--xh-tbar-text-color);
    background-color: var(--xh-tbar-bg);

    & > .xh-vbox {
      align-items: flex-start;

      & > * {
        margin: 2px var(--xh-tbar-item-pad-px);
      }

      .xh-toolbar__separator {
        border-bottom: 1px solid var(--xh-tbar-separator-color);
        align-self: stretch;
      }
    }
  }
}