/*
A26 Web Design System — Toolbar Refinement
Version: v1.0.0-alpha.0007-toolbar-refinement
*/

@layer a26.components {
  :root {
    --a26-toolbar-min-height: 52px;
    --a26-toolbar-compact-height: 48px;
    --a26-toolbar-padding-inline: 14px;
    --a26-toolbar-item-gap: 8px;
    --a26-toolbar-section-gap: 12px;
    --a26-toolbar-title-max: 15ch;
    --a26-toolbar-radius: 0px;
    --a26-toolbar-control-size: 44px;
    --a26-toolbar-control-visual-size: 34px;
    --a26-toolbar-prominent-height: 34px;
    --a26-toolbar-material-bg: var(--a26-material-regular-fill);
    --a26-toolbar-material-blur: var(--a26-material-regular-blur);
    --a26-toolbar-separator: var(--a26-separator);
  }

  .a26-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: var(--a26-toolbar-min-height);
    padding-inline: var(--a26-toolbar-padding-inline);
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    background: var(--a26-toolbar-material-bg);
    backdrop-filter: var(--a26-toolbar-material-blur);
    -webkit-backdrop-filter: var(--a26-toolbar-material-blur);
  }

  .a26-toolbar[data-placement="bottom"] {
    top: auto;
    bottom: 0;
    border-top: 1px solid var(--a26-toolbar-separator);
    border-bottom: 0;
  }

  .a26-toolbar__leading,
  .a26-toolbar__center,
  .a26-toolbar__trailing {
    min-height: var(--a26-toolbar-min-height);
    gap: var(--a26-toolbar-item-gap);
  }

  .a26-toolbar__leading { justify-content: flex-start; }
  .a26-toolbar__center { justify-content: center; }
  .a26-toolbar__trailing { justify-content: flex-end; }

  .a26-toolbar__title {
    max-width: var(--a26-toolbar-title-max);
    font: var(--a26-font-headline);
    line-height: 1;
  }

  .a26-toolbar__subtitle {
    margin: 2px 0 0;
    color: var(--a26-text-secondary);
    font: var(--a26-font-caption-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .a26-toolbar__title-stack {
    min-width: 0;
    display: grid;
    align-content: center;
  }

  .a26-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--a26-toolbar-item-gap);
  }

  .a26-toolbar__group + .a26-toolbar__group {
    margin-inline-start: var(--a26-toolbar-section-gap);
  }

  .a26-toolbar-button,
  .a26-toolbar-icon-button {
    min-width: var(--a26-toolbar-control-size);
    min-height: var(--a26-toolbar-control-size);
    border: 0;
    border-radius: var(--a26-radius-pill);
    color: var(--a26-accent);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: var(--a26-font-callout);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .a26-toolbar-button {
    min-width: auto;
    min-height: var(--a26-toolbar-control-size);
    padding-inline: 10px;
  }

  .a26-toolbar-button > span,
  .a26-toolbar-icon-button > span {
    min-width: var(--a26-toolbar-control-visual-size);
    min-height: var(--a26-toolbar-control-visual-size);
    border-radius: var(--a26-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .a26-toolbar-button:hover > span,
  .a26-toolbar-icon-button:hover > span {
    background: var(--a26-fill-quaternary);
  }

  .a26-toolbar-button:active > span,
  .a26-toolbar-icon-button:active > span {
    transform: scale(.96);
    background: var(--a26-fill-tertiary);
  }

  .a26-toolbar-button:focus-visible,
  .a26-toolbar-icon-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--a26-accent) 70%, transparent);
    outline-offset: 2px;
  }

  .a26-toolbar-button[data-variant="prominent"] {
    min-height: var(--a26-toolbar-control-size);
    padding-inline: 4px;
    color: white;
  }

  .a26-toolbar-button[data-variant="prominent"] > span {
    min-height: var(--a26-toolbar-prominent-height);
    padding-inline: 14px;
    background: var(--a26-accent);
  }

  .a26-toolbar-button[data-role="destructive"] { color: var(--a26-status-danger); }
  .a26-toolbar-button[data-variant="prominent"][data-role="destructive"] > span { background: var(--a26-status-danger); }

  .a26-toolbar-button[disabled],
  .a26-toolbar-icon-button[disabled] {
    opacity: .45;
    cursor: default;
  }

  .a26-toolbar[data-density="compact"] {
    min-height: var(--a26-toolbar-compact-height);
  }

  .a26-toolbar[data-density="compact"] .a26-toolbar__leading,
  .a26-toolbar[data-density="compact"] .a26-toolbar__center,
  .a26-toolbar[data-density="compact"] .a26-toolbar__trailing {
    min-height: var(--a26-toolbar-compact-height);
  }

  @media (max-width: 760px) {
    .a26-toolbar {
      min-height: var(--a26-toolbar-compact-height);
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .a26-toolbar__center { display: none; }
    .a26-toolbar__leading,
    .a26-toolbar__trailing { min-height: var(--a26-toolbar-compact-height); }
    .a26-toolbar__title { max-width: 12ch; }
    .a26-toolbar__group + .a26-toolbar__group { margin-inline-start: 4px; }
  }
}