/* ============================================================
   button.css — literal translation of library/lib/src/components/button.dart
   ============================================================
   Recipes from _pressable.dart (text shape, 4 variants × 2 mediums):

                 desktop (≥768px)            mobile (<768px)
                 h  | r        | icon | text  h  | r        | icon | text
     solid       32 | md (16)  | 16   | 14    40 | lg (24)  | 18   | 14
     soft        32 | md (16)  | 16   | 14    40 | lg (24)  | 18   | 14
     ghost       32 | md (16)  | 16   | 14    40 | lg (24)  | 18   | 14
     plain       24 | xs (8)   | 14   | 12    32 | xs (8)   | 16   | 12

   button.dart:
     basePad = Spacing.s4 (16) — used on any side that has no icon
     iconPad = Spacing.s3 (12) — used on the side that has an icon
     gap     = Spacing.s2 (8)  — between icon and label
     text    = AppFonts.outfit(fontSize: textSize, fontWeight: FontWeight.normal)

   Pressable (the surface):
     AnimatedContainer { height: r.h, borderRadius: r.r, alignment: center,
                         color: bg (120ms easeOut transition) }
     Wrapped in IntrinsicWidth when ButtonWidth.intrinsic (default).
     On mobile, scaled 0.97 on tap (_pressedScale).
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                /* Spacing.s2 */
  height: 40px;                       /* mobile recipe h */
  padding: 0 var(--space-4);          /* basePad = Spacing.s4 */
  border: 0;
  border-radius: var(--radius-lg);    /* mobile recipe r (Radii.lg) */
  background: transparent;
  color: inherit;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);     /* recipe textSize */
  font-weight: var(--font-weight-regular);  /* FontWeight.normal */
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 120ms ease-out,
    color 120ms ease-out,
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1.2);
}

.button:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

@media (hover: none) {
  .button:active { transform: scale(0.97); }  /* _pressedScale */
}

/* Icon (SVG direct child) — recipe iconSize. */
.button > svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Asymmetric padding: side adjacent to an icon shrinks to iconPad. */
.button:has(> svg:first-child) { padding-left:  var(--space-3); }   /* iconPad = Spacing.s3 */
.button:has(> svg:last-child)  { padding-right: var(--space-3); }

/* ----- Variants (from _Recipe colors in _pressable.dart) ----- */

.button--solid {
  background: var(--color-secondary);
  color: var(--color-secondary-foreground);
}

.button--soft {
  background: var(--color-muted);
  color: var(--color-foreground);
}

.button--ghost { color: var(--color-foreground); }
.button--ghost:hover { background: var(--color-muted); }

.button--plain {
  height: 32px;                       /* mobile plain recipe h */
  border-radius: var(--radius-xs);    /* plain recipe r (Radii.xs) */
  color: var(--color-foreground);
  font-size: var(--font-size-xs);     /* plain recipe textSize */
}
.button--plain:hover { background: var(--color-muted); }
.button--plain > svg { width: 16px; height: 16px; }  /* plain iconSize */

/* Link — plain text in muted color, primary on hover. No background,
   no padding, no border radius. Color transition reuses the base
   120ms ease-out from .button. */
.button--link {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-muted-foreground);
}
.button--link:hover { color: var(--color-primary); }

/* ----- Width modifier (ButtonWidth.full) -------------------- */

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

/* ----- Disabled (from _PressableState.build) ---------------- */

.button[disabled],
.button[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}

.button--solid[disabled],
.button--solid[aria-disabled="true"],
.button--soft[disabled],
.button--soft[aria-disabled="true"] {
  background: var(--color-accent);
  color: var(--color-muted-foreground);
}

.button--ghost[disabled],
.button--ghost[aria-disabled="true"],
.button--plain[disabled],
.button--plain[aria-disabled="true"],
.button--link[disabled],
.button--link[aria-disabled="true"] {
  background: transparent;
  color: var(--color-muted-foreground);
}

/* ----- Desktop sizing --------------------------------------- */

@media (min-width: 769px) {
  .button {
    height: 32px;                     /* desktop recipe h */
    border-radius: var(--radius-md);  /* desktop recipe r (Radii.md) */
  }
  .button > svg { width: 16px; height: 16px; }   /* desktop iconSize */

  .button--plain {
    height: 24px;                     /* desktop plain recipe h */
  }
  .button--plain > svg { width: 14px; height: 14px; }
}

.button--link {
  height: auto;                     /* link has no fixed height */
  border-radius: 0;
}