.button,
.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    border: none;
    border-radius: var(--md-shape-full);
    padding: 10px 24px;
    /* A <button> does not inherit the document's font, and half of these
       pills are buttons while the other half are links — without this a
       filled Save and the outlined Undo beside it are set in two
       different families at two different heights. */
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    background: var(--md-primary);
    color: var(--md-on-primary);
    cursor: pointer;
    transition: box-shadow 120ms ease, background-color 120ms ease;
}

.button:hover,
.action-button:hover {
    background: color-mix(in srgb, var(--md-primary) 92%, var(--md-on-primary) 8%);
    box-shadow: var(--md-elevation-1);
}

.action-button {
    padding: 8px 20px;
}

.navigation__button {
    width: 100%;
    background: transparent;
    border: 1px solid var(--md-outline);
    color: var(--md-primary);
}

.navigation__button:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
    box-shadow: none;
}

/* A page's own action cluster: one row of pills, one height. The fill
   says which one is primary; the size never does.

   Without this the row showed THREE heights for four buttons. .actions
   stretches its children by default, so an outlined LINK grew to the
   filled pill's height, while an outlined BUTTON inside its delete form
   kept the smaller size that is right in a table cell and wrong here.
   The transparent border keeps the filled pill's box the same as the
   outlined ones' rather than a pixel shorter. */
.actions--page {
    align-items: center;
}

.actions--page .button,
.actions--page .actions__button {
    padding: 9px 20px;
    font-size: 14px;
    line-height: 18px;
}

.actions--page .button {
    border: 1px solid transparent;
}

/* A submit that has to read as a link, because it sits inside a sentence.
   The decompose page's "choose another pair" is the case: it carries the
   typed task back to the picker in a POST body — the task is too long to
   put in a URL — but it is prose, not a control the eye should land on.
   Without this the pill styling above made a button of it mid-paragraph. */
.button--link {
    display: inline;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--md-primary);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.button--link:hover {
    background: transparent;
    box-shadow: none;
    text-decoration-thickness: 2px;
}