@layer components {
  .btn {
    --btn-bg: var(--color-surface);
    --btn-ink: var(--color-ink);
    --btn-line: var(--color-line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--btn-line);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);

    & svg { width: 18px; height: 18px; flex: none; }
    &:hover { text-decoration: none; background: color-mix(in oklab, var(--btn-bg), var(--color-ink) 5%); }
    &:disabled { opacity: 0.5; cursor: not-allowed; }
  }

  .btn--primary { --btn-bg: var(--color-accent); --btn-ink: var(--color-accent-ink); --btn-line: var(--color-accent); &:hover { background: var(--color-accent-hover); } }
  .btn--danger { --btn-ink: var(--color-danger-ink); --btn-line: color-mix(in oklab, var(--color-danger), transparent 60%); }
  .btn--small { height: 2.125rem; padding: 0 0.75rem; font-size: 0.875rem; }
  .btn--icon { padding: 0 0.625rem; }

  /* A button_to form sits inline next to buttons and links. */
  form.button_to { display: inline; }
}