/* Button. */

.button {
  padding: 0.875rem 1.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--surface-raised);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}

.button:hover {
  color: var(--surface-raised);
  background: var(--accent);
  border-color: var(--accent);
}

.button:active {
  color: var(--surface-raised);
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

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

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

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

.button--small { padding: 0.5rem 1rem; font-size: 0.8125rem; }

/* Last in the block, after every variant: the disabled state must win over the
   hover and active rules of .button--quiet, which carry the same specificity
   and would otherwise let a disabled button light up under the cursor.
   HTMX disables the submit for the length of the request (hx-disabled-elt), so
   this is the only feedback the slowest actions in the app give while they run.
   Without it a disabled button is indistinguishable from a live one and invites
   a second click. */
.button:disabled,
.button[aria-disabled="true"] {
  color: var(--ink-faint);
  background: var(--sunk);
  border-color: var(--line);
  cursor: not-allowed;
}