@layer components {
  
  .button {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space);
    min-height: var(--control-h);
    padding: 0 var(--space-3);
    border: var(--line-w-control) solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    white-space: nowrap;
    
    text-decoration: none;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), var(--responds);
  }

  .button:hover {
    background: var(--surface-hover);
    border-color: var(--ink-faint);
    color: var(--ink);
  }

  .stack > .button,
  .stack > input.button { align-self: flex-start; }
  .button--block { align-self: stretch; width: 100%; }
  .button--small { min-height: var(--control-h-sm); font-size: var(--text-xs); padding-inline: var(--space-2); }

  .button--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }

  .button--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-ink);
  }

  .button--danger {
    color: var(--danger);
    border-color: var(--danger);
  }

  .button--danger:hover {
    background: var(--danger-sunk);
    border-color: var(--danger);
    color: var(--danger);
  }

  
  .button--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ink-muted);
  }

  
  .button--choice[aria-current] {
    border-color: var(--accent);
    background: var(--accent-sunk);
    color: var(--ink);
  }

  
  .button:disabled { opacity: 0.5; cursor: default; pointer-events: none; }

  
  .button--quiet:hover { background: var(--surface-hover); border-color: var(--line-strong); color: var(--ink); }

  
  .button--quiet.button--danger { color: var(--danger); border-color: transparent; }
  .button--quiet.button--danger:hover { background: var(--danger-sunk); border-color: var(--danger); color: var(--danger); }
}