@layer components {
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-block: 10px;
    padding-inline: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: var(--text-14);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: filter 120ms, background-color 120ms;

    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .btn--primary {
    --btn-bg: var(--color-accent);
    --btn-fg: var(--color-ink-inverted);
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink-muted);
    --btn-border: var(--color-border);
  }

  .btn--destructive {
    --btn-bg: var(--color-ink-inverted);
    --btn-fg: var(--color-negative);
    --btn-border: var(--color-border);
  }

  .btn--small {
    padding-block: 6px;
    padding-inline: var(--space-3);
    font-size: var(--text-12);
  }

  .btn--icon {
    padding: 8px;
    inline-size: 36px;
    block-size: 36px;
  }

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

  @media (any-hover: hover) {
    .btn--primary:hover {
      --btn-bg: var(--color-accent-hover);
      color: var(--color-ink-inverted);
    }

    .btn--ghost:hover {
      --btn-bg: var(--color-surface);
      color: var(--color-ink);
    }

    .btn--destructive:hover {
      --btn-bg: var(--color-negative-soft);
      color: var(--color-negative);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none;
    }
  }

  /* Copy-to-clipboard: swap label on .is-copied */
  .copy-to-clipboard__label {
    display: inline;
  }

  .copy-to-clipboard__label--done {
    display: none;
  }

  .is-copied .copy-to-clipboard__label {
    display: none;
  }

  .is-copied .copy-to-clipboard__label--done {
    display: inline;
  }
}