@layer components {
  :where(.btn) {
    align-items: center;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem 1rem;
    text-decoration: none;

    &:focus-visible {
      box-shadow: var(--shadow-focus);
      outline: none;
    }
  }

  .btn--primary {
    background: var(--color-brand-fill);
    color: var(--color-on-fill);
  }

  .btn--danger {
    background: var(--color-negative-fill);
    color: var(--color-on-fill);
  }

  .btn--outline {
    background: transparent;
    border-color: var(--color-brand);
    color: var(--color-brand);
  }

  .btn--ghost {
    background: transparent;
    color: var(--color-ink-muted);

    &:hover {
      color: var(--color-ink);
    }
  }

  .btn--small {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
  }

  .btn--block {
    inline-size: 100%;
  }

  /* button_to wraps its button in a form; let the form take the button's place. */
  form.button_to {
    display: contents;
  }
}