/* Lagos Life icon button. Owner 5c. Spec: buttons.html#icon-button.
   Markup: <button class="ll-icon-button ll-icon-button--secondary ll-icon-button--sm ll-interactive" aria-label="Share">
             <svg class="ll-icon-button__icon" aria-hidden="true">…</svg>
           </button>
   Always round. Always an accessible name (aria-label), because the glyph or emoji is decorative. */

.ll-icon-button {
  --_fill: var(--secondary);
  --_label: var(--ink);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-md);
  height: var(--control-md);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--_fill);
  color: var(--_label);
  font: var(--type-label);
  line-height: 1;
}
.ll-icon-button__icon { width: var(--icon-md); height: var(--icon-md); font-size: var(--icon-md); line-height: 1; display: inline-grid; place-items: center; }

/* Sizes */
.ll-icon-button--sm { width: var(--control-sm); height: var(--control-sm); }
.ll-icon-button--sm .ll-icon-button__icon { width: var(--icon-sm); height: var(--icon-sm); font-size: var(--icon-sm); }
.ll-icon-button--lg { width: var(--control-lg); height: var(--control-lg); }
.ll-icon-button--lg .ll-icon-button__icon { width: var(--icon-lg); height: var(--icon-lg); font-size: var(--icon-lg); }

/* Variants */
.ll-icon-button--secondary { --_fill: var(--secondary); --_label: var(--ink); }
.ll-icon-button--ghost     { --_fill: transparent; --_label: var(--ink-soft); }
.ll-icon-button--primary   { --_fill: var(--primary); --_label: var(--primary-foreground); }

/* Background-safe floating button: control glass, 1px glass edge, glass shadow. Sits on the world. */
.ll-icon-button--floating {
  --_fill: var(--surface-glass-control);
  --_label: var(--ink);
  --_shadow: var(--shadow-glass);
  border: 1px solid var(--border-glass);
}
@media (pointer: fine) {
  .ll-icon-button--floating { -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); }
}

/* Wallet top-up: the 28px leaf circle at the end of the wallet pill. Hit area still 44. */
.ll-icon-button--topup {
  --_fill: var(--primary);
  --_label: var(--primary-foreground);
  width: var(--icon-button-topup-size);
  height: var(--icon-button-topup-size);
  font: var(--type-label-lg);
}
.ll-icon-button--topup .ll-icon-button__icon { width: var(--icon-sm); height: var(--icon-sm); }

.ll-icon-button--ghost:is([aria-disabled="true"], :disabled) { background-color: transparent; }

/* Primary and top-up follow the primary button's fills (R7, decided 15 Oct 2026): hover and pressed darken
   the fill (--primary-hover, --primary-pressed) instead of a white state layer, so the glyph gains contrast.
   They keep the house 0.97 press and no lip: they are icons inside rows, not the screen's one CTA. */
.ll-icon-button:is(.ll-icon-button--primary, .ll-icon-button--topup)::before { display: none; }
@media (hover: hover) {
  .ll-icon-button:is(.ll-icon-button--primary, .ll-icon-button--topup):not([aria-disabled="true"], :disabled, [aria-busy="true"]):hover { --_fill: var(--primary-hover); }
}
.ll-icon-button:is(.ll-icon-button--primary, .ll-icon-button--topup)[data-demo-state="hover"] { --_fill: var(--primary-hover); }
.ll-icon-button:is(.ll-icon-button--primary, .ll-icon-button--topup):not([aria-disabled="true"], :disabled, [aria-busy="true"]):active,
.ll-icon-button:is(.ll-icon-button--primary, .ll-icon-button--topup)[data-demo-state="pressed"] { --_fill: var(--primary-pressed); }

/* Loading */
.ll-icon-button > .ll-spinner { display: none; }
.ll-icon-button[aria-busy="true"] > .ll-spinner { display: block; }
.ll-icon-button[aria-busy="true"] > :not(.ll-spinner) { display: none; }
.ll-icon-button[aria-busy="true"][aria-disabled="true"] { background-color: var(--_fill); color: var(--_label); }