/* ========== Button ========== */
/*
 * Port of the Exa design system Button (ExaLife src/components/ui/button.tsx), without Tailwind.
 * Markup contract: see references/components.md in the exa-design-web skill.
 *
 * Variants: .exa-btn--primary (solid), .exa-btn--secondary (exa-2 tint), .exa-btn--tertiary (text only)
 * Sizes:    .exa-btn--s 32px · .exa-btn--m 40px · .exa-btn--l 48px. Labels 16px; icons 16 / 18 / 20px.
 * Icon only: add .exa-btn--icon for a circle (default secondary + m).
 * States:   :disabled / [aria-disabled="true"], and [aria-busy="true"] for loading.
 */

.exa-btn {
  box-sizing: border-box;
  --exa-btn-height: 40px;
  --exa-btn-padding-x: 16px;
  --exa-btn-gap: 8px;
  --exa-btn-icon-size: 18px;

  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--exa-btn-gap);
  height: var(--exa-btn-height);
  padding: 0 var(--exa-btn-padding-x);
  border: 0;
  border-radius: var(--exa-radius);
  background-clip: padding-box;
  box-shadow: none;
  font-family: var(--exa-font-body);
  font-size: 16px;
  font-weight: var(--exa-font-weight-medium);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: all var(--exa-duration-base) var(--exa-ease-standard);
}

.exa-btn:focus-visible {
  box-shadow: var(--exa-focus-ring);
}

.exa-btn:active:not([aria-haspopup]) {
  transform: translateY(1px);
}

.exa-btn:disabled,
.exa-btn[aria-disabled="true"],
.exa-btn[aria-busy="true"] {
  pointer-events: none;
  opacity: var(--exa-opacity-disabled);
}

.exa-btn .exa-icon {
  flex-shrink: 0;
  width: var(--exa-btn-icon-size);
  height: var(--exa-btn-icon-size);
  pointer-events: none;
}

/* ---------- Variants ---------- */
.exa-btn--primary {
  background-color: var(--exa-color-primary);
  color: var(--exa-color-primary-foreground);
}

.exa-btn--primary:hover {
  background-color: var(--exa-color-brand);
  color: var(--exa-color-brand-foreground);
}

.exa-btn--secondary {
  background-color: var(--exa-color-brand-subtle);
  color: var(--exa-color-brand);
}

.exa-btn--secondary:hover {
  background-color: color-mix(in oklch, var(--exa-color-brand-subtle) 70%, transparent);
}

.exa-btn--tertiary {
  background-color: transparent;
  color: var(--exa-color-brand);
}

.exa-btn--tertiary:hover {
  color: color-mix(in oklch, var(--exa-color-brand) 70%, transparent);
}

/* ---------- Sizes ---------- */
.exa-btn--s {
  --exa-btn-height: 32px;
  --exa-btn-padding-x: 12px;
  --exa-btn-gap: 6px;
  --exa-btn-icon-size: 16px;
}

.exa-btn--m {
  --exa-btn-height: 40px;
  --exa-btn-padding-x: 16px;
  --exa-btn-gap: 8px;
  --exa-btn-icon-size: 18px;
}

.exa-btn--l {
  --exa-btn-height: 48px;
  --exa-btn-padding-x: 20px;
  --exa-btn-gap: 8px;
  --exa-btn-icon-size: 20px;
}

/* ---------- Icon only ---------- */
.exa-btn--icon {
  width: var(--exa-btn-height);
  padding: 0;
  border-radius: var(--exa-radius-full);
}

/* ---------- Loading ---------- */
/* The spinner sits over the content, which keeps its space so the width doesn't jump. */
.exa-btn[aria-busy="true"] > :not(.exa-btn__spinner) {
  visibility: hidden;
}

.exa-btn__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--exa-btn-icon-size);
  height: var(--exa-btn-icon-size);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--exa-radius-full);
  animation: exa-btn-spin 0.7s linear infinite;
}

@keyframes exa-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .exa-btn { transition: none; }
  .exa-btn__spinner { animation-duration: 2s; }
}