/*
A26 Web Design System — Buttons & Basic Controls
Version: v1.0.0-alpha.0010-buttons-controls
*/

@layer a26.components {
  .a26-button,
  .a26-icon-button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    text-decoration: none;
    font: var(--a26-font-callout);
    color: var(--a26-button-text);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--a26-space-2);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    min-width: var(--a26-control-hit-min);
    min-height: var(--a26-control-hit-min);
    transition: background-color .16s ease, color .16s ease, transform .08s ease, opacity .16s ease, box-shadow .16s ease;
  }

  .a26-button {
    min-height: var(--a26-button-height);
    padding-inline: var(--a26-button-padding-x);
    border-radius: var(--a26-button-radius);
    background: var(--a26-button-bg);
  }

  .a26-button[data-size="compact"] {
    min-height: 30px;
    padding-inline: 11px;
    font: var(--a26-font-footnote);
  }

  .a26-button[data-size="large"] {
    min-height: 44px;
    padding-inline: 18px;
    font: var(--a26-font-body);
  }

  .a26-button[data-shape="capsule"],
  .a26-icon-button[data-shape="capsule"] { border-radius: var(--a26-radius-pill); }

  .a26-button[data-shape="rounded"] { border-radius: var(--a26-radius-md); }

  .a26-icon-button {
    width: var(--a26-control-hit-min);
    height: var(--a26-control-hit-min);
    border-radius: var(--a26-radius-pill);
  }

  .a26-icon-button[data-size="compact"] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .a26-button:hover,
  .a26-icon-button:hover { background: var(--a26-button-bg-hover); }

  .a26-button:active,
  .a26-icon-button:active,
  .a26-button[data-state="pressed"],
  .a26-icon-button[data-state="pressed"] { transform: scale(var(--a26-button-pressed-scale)); }

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

  .a26-button[disabled],
  .a26-icon-button[disabled],
  .a26-button[aria-disabled="true"],
  .a26-icon-button[aria-disabled="true"] {
    opacity: var(--a26-button-disabled-opacity);
    cursor: default;
    pointer-events: none;
  }

  .a26-button[data-variant="plain"] {
    background: transparent;
    color: var(--a26-accent);
  }

  .a26-button[data-variant="plain"]:hover,
  .a26-icon-button[data-variant="plain"]:hover { background: var(--a26-fill-quaternary); }

  .a26-button[data-variant="tinted"] {
    background: color-mix(in srgb, var(--a26-accent) 14%, var(--a26-fill-tertiary));
    color: var(--a26-accent);
  }

  .a26-button[data-variant="bordered"] {
    background: color-mix(in srgb, var(--a26-bg-elevated) 60%, transparent);
    border: 1px solid var(--a26-button-border);
  }

  .a26-button[data-variant="prominent"] {
    background: var(--a26-button-prominent-bg);
    color: var(--a26-button-prominent-text);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--a26-accent) 22%, transparent);
  }

  .a26-button[data-role="cancel"] { color: var(--a26-button-cancel-text); }

  .a26-button[data-role="destructive"],
  .a26-icon-button[data-role="destructive"] { color: var(--a26-button-destructive); }

  .a26-button[data-role="destructive"][data-variant="tinted"] {
    background: color-mix(in srgb, var(--a26-button-destructive) 14%, var(--a26-fill-tertiary));
  }

  .a26-button[data-role="destructive"][data-variant="prominent"] {
    background: var(--a26-button-destructive);
    color: #fff;
    box-shadow: none;
  }

  .a26-button[data-loading="true"] { position: relative; }
  .a26-button[data-loading="true"]::before {
    content: "";
    width: var(--a26-button-loading-spinner-size);
    height: var(--a26-button-loading-spinner-size);
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: a26-button-spin .9s linear infinite;
  }

  .a26-button-group {
    display: inline-flex;
    gap: var(--a26-space-2);
    align-items: center;
    flex-wrap: wrap;
  }

  .a26-button-stack {
    display: grid;
    gap: var(--a26-space-3);
    align-items: start;
  }

  @keyframes a26-button-spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    .a26-button,
    .a26-icon-button { transition: none; }
    .a26-button:active,
    .a26-icon-button:active { transform: none; }
    .a26-button[data-loading="true"]::before { animation-duration: 1.6s; }
  }
}

/* Compatibility aliases added in v1.0.0-alpha.0015-demo-interactions-fix */
@layer a26.components {
  .a26-button--plain { background: transparent; color: var(--a26-accent); }
  .a26-button--tinted { background: color-mix(in srgb, var(--a26-accent) 14%, var(--a26-fill-tertiary)); color: var(--a26-accent); }
  .a26-button--bordered { background: color-mix(in srgb, var(--a26-bg-elevated) 60%, transparent); border: 1px solid var(--a26-button-border); }
  .a26-button--prominent { background: var(--a26-button-prominent-bg); color: var(--a26-button-prominent-text); box-shadow: 0 8px 20px color-mix(in srgb, var(--a26-accent) 22%, transparent); }
}


/* v1.0.6-0032 — active/prominent button symbols inherit active button foreground. */
@layer a26.components {
  .a26-button[data-variant="prominent"] .a26-symbol,
  .a26-button--prominent .a26-symbol,
  .a26-button.is-active .a26-symbol,
  .a26-button[aria-pressed="true"] .a26-symbol,
  .a26-icon-button.is-active .a26-symbol,
  .a26-icon-button[aria-pressed="true"] .a26-symbol,
  .a26-toolbar-button.is-active .a26-symbol,
  .a26-toolbar-button[aria-pressed="true"] .a26-symbol {
    filter: var(--a26-symbol-filter-on-accent, invert(1) brightness(1.18));
  }
}