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

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

   icon_button.dart:
     Just a Pressable with square: true. No padding — the icon
     is centered by the container's alignment: Alignment.center.

   Pressable (the surface):
     AnimatedContainer { height: r.h, width: r.h, borderRadius: r.r,
                         alignment: center, color: bg (120ms easeOut) }
     On mobile, scaled 0.97 on tap (_pressedScale).

   solid/soft/ghost use Radii.lg (24); since lg > h/2 the corner
   clamps to a circle at h=32 and h=40. plain uses Radii.xs (8).
   ============================================================ */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;                        /* mobile recipe h (square) */
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);    /* mobile recipe r (Radii.lg) */
  background: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-button {
  width: 32px;                      /* desktop recipe h */
  height: 32px;
}
.icon-button > svg { width: 16px; height: 16px; }  /* desktop iconSize */

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