@layer components {
  .btn {
    /* Customizable properties with fallbacks */
    --btn-background: var(--color-canvas);
    --btn-background-hover: var(--color-ink-lightest);
    --btn-border-color: var(--color-border);
    --btn-color: var(--color-ink);
    --btn-padding: 0.5em 1.25em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: var(--btn-padding);
    font-weight: 600;
    font-size: 1em;
    border-radius: var(--border-radius);
    border: 1px solid var(--btn-border-color);
    background: var(--btn-background);
    color: var(--btn-color);
    text-decoration: none;
    cursor: pointer;
    transition: all 150ms ease;

    &:hover {
      background: var(--btn-background-hover);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Button with icon */
    &:where(:has(svg)) {
      svg {
        width: 1.2em;
        height: 1.2em;
        flex-shrink: 0;
      }
    }
  }

  /* Variants - only change what's different */
  .btn--primary {
    --btn-background: var(--color-link);
    --btn-background-hover: var(--color-link-hover);
    --btn-border-color: var(--color-link);
    --btn-color: var(--color-ink-inverted);
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-background-hover: var(--color-negative-hover);
    --btn-border-color: var(--color-negative);
    --btn-color: var(--color-ink-inverted);
  }

  .btn--plain {
    --btn-background: transparent;
    --btn-background-hover: transparent;
    --btn-border-color: transparent;
    --btn-padding: 0;

    &:hover {
      --btn-color: var(--color-link);
    }
  }

  .btn--small {
    font-size: var(--text-footnote);
    --btn-padding: 0.5em 0.75em;
  }

  .btn--block {
    width: 100%;
  }
}