/* A button is ink with the page's color on it, square, with a firm edge. */
button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-block-size: var(--control-size);
  border: var(--edge) solid var(--accent);
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;

  /* What cannot be undone, such as deleting an account. */
  &.danger {
    border-color: var(--error);
    background: var(--error);
    color: var(--on-error);
  }

  /* The way back beside a main button, such as Cancel. */
  &.secondary {
    background: transparent;
    color: var(--accent);
  }

  &:disabled,
  &[aria-disabled="true"] {
    background: var(--surface);
    border-color: var(--rule);
    color: var(--muted);
    cursor: default;
  }
}