/* -- Toolbar component ------------------------------------------ */

@layer components {
  .toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
    width: fit-content;

    /* -- Sizes ----------------------------------------------------
       data-size on the .toolbar root scales the chrome (padding/gap) and the
       direct .btn/.toggle/.toggle-group controls together, mirroring the
       button ladder (md = .btn's default 2.25rem). The descendant selector
       (0-3-0) outranks each control's own [data-size] rule (0-2-0). */
    &[data-size="xs"] {
      gap: 0.125rem;
      padding: 0.125rem;
      & :is(.btn, .toggle) { height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }
    }
    &[data-size="sm"] {
      gap: 0.1875rem;
      padding: 0.1875rem;
      & :is(.btn, .toggle) { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
    }
    &[data-size="md"] {
      gap: 0.25rem;
      padding: 0.25rem;
      & :is(.btn, .toggle) { height: 2.25rem; }
    }
    &[data-size="lg"] {
      gap: 0.375rem;
      padding: 0.375rem;
      & :is(.btn, .toggle) { height: 2.75rem; padding: 0 1rem; font-size: 1rem; }
    }
    &[data-size="xl"] {
      gap: 0.5rem;
      padding: 0.5rem;
      & :is(.btn, .toggle) { height: 3.25rem; padding: 0 1.25rem; font-size: 1.125rem; }
    }

    /* Vertical separators stretch to fill toolbar height */
    & > .separator[data-orientation="vertical"] {
      align-self: stretch;
      height: auto;
      margin: 0.25rem 0.25rem;
    }

    /* Vertical toolbar */
    &[aria-orientation="vertical"] {
      flex-direction: column;

      & > .separator[data-orientation="horizontal"],
      & > .separator:not([data-orientation]) {
        height: 1px;
        width: 1.5rem;
        margin: 0.25rem 0;
      }
    }
  }

  @media (forced-colors: active) {
    .toolbar {
      border-color: ButtonText;
    }
  }
}