@layer components {
  /* One height, so a button standing next to an input or a select lines up
     with it instead of nearly lining up with it. --button--small is for the
     ones that sit inside a list row, where the row sets the rhythm. */
  .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: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), var(--responds);
  }

  .button:hover { background: var(--accent-hover); }

  /* A button in a stack hugs its label rather than being stretched to the
     column width by the stack's default alignment. Full width is then a choice
     — button--block — made where a page has one obvious action. */
  .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--quiet {
    background: transparent;
    color: var(--ink-muted);
    border-color: var(--line-strong);
  }
  .button--quiet:hover { background: var(--surface-hover); color: var(--ink); }

  /* Destructive, said once.
     
     This used to be a bordered red button, and there were four of them — three
     stacked down the Members list — while the most consequential one in the
     product, Move to trash, was quiet text that only reddened under the
     pointer. The loud treatment was on the repeated element and the quiet one
     on the rare one, which is the wrong way round: a list of red buttons makes
     a page look more dangerous than it is, and teaches people to stop reading
     them by the third row.
     
     So the quiet one wins everywhere. What actually stops these being an
     accident is the confirmation, not the colour. */
  .button--danger {
    background: transparent;
    color: var(--ink-faint);
    border-color: transparent;
  }
  .button--danger:hover { background: var(--surface-hover); color: var(--danger); }
}