@layer components {
  /* Buttons

     One shape, and then a colour saying what pressing it means.

     The shape is the Copy button beside the join link: an outline, the
     quietest ink that is still ink, and the same corner and height as the
     field it stands next to. That is the default and it is deliberately the
     plain one — most buttons in this product are the second or third thing on
     their page, and a page where every action is painted in the accent has
     told you nothing about which of them you came for.

     Three colours over that shape and no fourth:

       (default)  neutral. Copy, Set, Reset link, Newer, Older, Put back.
       --primary  the accent, filled. The one action a page exists for, and
                  never more than one per page.
       --danger   the same outline in red. Something you cannot undo.

     --quiet is not a fourth colour, it is the shape with its border taken
     away, for the ones that repeat down a list or sit inside a menu — where an
     outline on every row is a toolbar rather than a list. It combines with
     --danger, and that combination is what carries the destructive action
     that appears on every row.

     Height and corner come from the same tokens the fields use, so a button
     standing next to an input 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 var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    white-space: nowrap;
    /* Several of these are links rather than buttons — Newer and Older on the
       inbox, Create another workspace — and a link is underlined by base.css.
       A button that is underlined because of what it happens to be made of is
       the seam this file exists to remove. */
    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);
  }

  /* 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); }

  /* The one thing a page is for. Filled rather than outlined, because the
     whole point of it is to be found without being read — and the border is
     the accent too, so it is the same silhouette as everything beside it and
     not a slightly larger box. */
  .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);
  }

  /* Destructive, said once per page.

     This used to be quiet text that only reddened under the pointer, on the
     argument that 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. That
     argument was right about the list and wrong about the page: Close this
     workspace deletes everything for everybody and it was the palest thing on
     the screen.

     So the argument is kept where it applies and the colour is spent where it
     belongs. On its own this is red — an outline, not a fill, because a solid
     red button is a warning and this is a choice. Down a list of rows it is
     --quiet as well, and the pair below is what that means. What actually
     stops any of these being an accident is still the confirmation. */
  .button--danger {
    color: var(--danger);
    border-color: var(--danger);
  }

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

  /* The shape with the outline taken off. For a control that repeats — Remove
     on every member, Put back on every deleted task — and for the ones inside
     a menu, where the panel is already the box.

     Written after --primary and --danger, so on a button carrying both classes
     the border it removes stays removed: they are the same specificity and the
     later rule wins. The two-class rules underneath are the compounds, and
     they exist because a single class cannot beat a single class. */
  .button--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ink-muted);
  }

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

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