@layer components {
  .btn {
    --btn-bg: var(--color-surface);
    --btn-color: var(--color-ink);
    --btn-border: var(--color-border);
    --btn-hover-brightness: 0.95;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    color: var(--btn-color);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: filter var(--transition-fast), background-color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover:not([disabled]) {
        filter: brightness(var(--btn-hover-brightness));
      }
    }

    &:active:not([disabled]) {
      filter: brightness(0.9);
    }

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

    & svg {
      width: 1.25em;
      height: 1.25em;
      flex-shrink: 0;
    }
  }

  .btn--primary {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-on-primary);
    --btn-border: var(--color-primary);
    --btn-hover-brightness: 0.9;
    border-radius: var(--radius-full);
  }

  .btn--outline-primary {
    --btn-bg: var(--color-surface);
    --btn-color: var(--color-primary-hover);
    --btn-border: var(--color-primary);
    border-width: 2px;
    border-radius: var(--radius-full);

    &:hover:not([disabled]) {
      --btn-bg: var(--color-primary-container);
      filter: none;
    }
  }

  .btn--secondary {
    --btn-bg: var(--color-secondary);
    --btn-color: var(--color-ink-inverted);
    --btn-border: var(--color-secondary);
    --btn-hover-brightness: 0.9;
  }

  .btn--positive {
    --btn-bg: var(--color-positive);
    --btn-color: var(--color-ink-inverted);
    --btn-border: var(--color-positive);
    --btn-hover-brightness: 0.9;
  }

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

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;

    &:hover:not([disabled]) {
      --btn-bg: var(--color-border-subtle);
      filter: none;
    }
  }

  .btn--link {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-color: var(--color-primary-hover);
    padding: 0;

    &:hover:not([disabled]) {
      --btn-color: var(--color-secondary);
      filter: none;
      text-decoration: underline;
    }
  }

  .btn--sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
  }

  .btn--lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-base);
    border-radius: var(--radius-full);
  }

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

  .btn--icon {
    padding: var(--space-sm);

    & svg {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  .btn-group {
    display: flex;
    gap: var(--space-sm);
  }

  .btn-group--end {
    justify-content: flex-end;
  }
}