/* The pill button every area presses: the sign-in form's submit, the account
   pages' actions, the marketing page's calls to action, the document lists'
   "new" button, the editor's sidebar. `:where()` keeps the base at zero
   specificity, so a block that sizes or colours its button its own way
   (`.inv-sidebar__btn`, `.home-header__cta`) wins with a plain class and no
   `!important`. A button is `btn` plus one colour and, where it differs from
   the default, one size. */

@layer components {
  :where(.btn) {
    align-items: center;
    appearance: none;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
  }

  /* A label over a file input — the avatar's, the logo's — shows the focus
     the input inside it has. */
  :where(.btn:focus-visible, .btn:has(:focus-visible)) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  :where(.btn:disabled, .btn.is-disabled) {
    cursor: not-allowed;
    opacity: 0.45;
  }

  /* ─── Colours ────────────────────────────── */

  /* The brand as a surface: the one action a page invites. */
  :where(.btn--primary) {
    background: var(--color-brand-fill);
    border-color: var(--color-brand-fill);
    color: var(--color-ink-inverted);
  }

  :where(.btn--primary:hover) {
    background: var(--color-brand-fill-strong);
    border-color: var(--color-brand-fill-strong);
    color: var(--color-ink-inverted);
  }

  /* A quiet button on the surface, the brand only in its text. */
  :where(.btn--ghost) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-brand);
  }

  :where(.btn--ghost:hover) {
    background: var(--color-surface-tint);
    border-color: var(--color-border-strong);
  }

  /* Outlined in the brand: a second way in beside a primary. */
  :where(.btn--outline) {
    background: var(--color-surface);
    border-color: var(--color-brand);
    color: var(--color-brand);
  }

  :where(.btn--outline:hover) {
    background: var(--color-brand-tint);
  }

  :where(.btn--danger) {
    background: var(--color-surface);
    border-color: var(--color-negative-border);
    color: var(--color-negative-strong);
  }

  :where(.btn--danger:hover) {
    background: var(--color-negative-tint);
  }

  /* ─── Sizes ──────────────────────────────── */

  :where(.btn--small) {
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
  }

  :where(.btn--large) {
    font-size: 1rem;
    padding: 0.875rem 1.75rem;
  }

  :where(.btn--block) {
    display: flex;
    inline-size: 100%;
  }
}