/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */
.xh-toolbar {
  // Toolbars are the compact-button special case: keep buttons short and tight-cornered so they
  // fit dense bars, overriding the taller / rounder defaults used for buttons in body content
  // (see vars.scss). Derive the button height from the bar size so a single token
  // (--xh-tbar-min-size) drives both - subtracting the bar's vertical padding so buttons fit a
  // horizontal bar. The same height is reused for vertical bars to keep buttons consistent.
  --xh-button-height: calc(var(--xh-tbar-min-size-px) - 2 * var(--xh-pad-half-px));
  --xh-button-border-radius-px: var(--xh-border-radius-px);

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

  > * {
    white-space: nowrap;
    flex-shrink: 0;

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

  &--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([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);
    }
  }

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

    &: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;
      margin-left: calc(var(--xh-tbar-item-pad) * 2px);
      margin-right: var(--xh-tbar-item-pad-px);
    }
  }
}