@scope (.button) {
  :scope {
    --_bg: var(--color-primary);
    --_text: var(--color-text-on-primary);
    --_border: transparent;
    --_radius: var(--radius-lg);
    --_height: 2.85rem;
    --_padding-x: var(--space-xl);
    --_size: var(--text-base);
    --_weight: var(--font-medium);
    --_shadow-rest: var(--shadow-xs);
    --_shadow: var(--_shadow-rest);
    --_shadow-hover: var(--shadow-md);
    --_lift: 0 0;
    --_lift-hover: 0 calc(var(--space-2xs) * -1);
    --_grow: 1;
    --_grow-hover: 1.02;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: var(--_height);
    padding-inline: var(--_padding-x);
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--_bg);
    color: var(--_text);
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    box-shadow: var(--_shadow);
    font-family: var(--font-body);
    font-size: var(--_size);
    font-weight: var(--_weight);
    line-height: var(--leading-none);
    cursor: pointer;
    text-decoration: none;
    translate: var(--_lift);
    scale: var(--_grow);
    transition:
      background-color 0.18s ease,
      color 0.18s ease,
      box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      translate 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      scale 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    &:hover {
      --_bg: var(--color-primary-hover);
      text-decoration: none;
    }

    @media (hover: hover) {
      &:hover:not(:disabled):not([aria-disabled="true"]) {
        --_shadow: var(--_shadow-hover);
      }
    }

    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      &:hover:not(:disabled):not([aria-disabled="true"]) {
        --_lift: var(--_lift-hover);
        --_grow: var(--_grow-hover);
      }

      &:active:not(:disabled):not([aria-disabled="true"]) {
        --_lift: 0 0;
        --_grow: 1;
        --_shadow: var(--_shadow-rest);
      }
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  :scope.button--secondary {
    --_bg: var(--color-surface);
    --_text: var(--color-text);
    --_border: var(--color-border);

    &:hover {
      --_bg: var(--color-surface-muted);
    }
  }

  :scope.button--danger {
    --_bg: var(--color-error);
    --_text: var(--color-text-on-primary);

    &:hover {
      --_bg: light-dark(var(--red-700), var(--red-400));
    }
  }

  :scope.button--ghost {
    --_bg: transparent;
    --_text: var(--color-text);
    --_border: transparent;
    --_shadow-rest: none;
    --_shadow-hover: none;
    --_lift-hover: 0 0;
    --_grow-hover: 1;

    &:hover {
      --_bg: var(--color-surface-muted);
    }
  }

  :scope.button--icon {
    --_padding-x: var(--space-sm);
  }

  :scope.button--neutral {
    --_text: light-dark(var(--slate-400), var(--slate-500));
    color: var(--_text);

    .icon {
      color: var(--_text);
      fill: currentColor;
    }
  }
}