/*
 * IconButton (IconButton.jsx dell'oracolo) — affordance quadrata solo-icona
 * (wishlist, carrello, chiudi, nav). Nessun blocco WordPress nativo (è un
 * <button> scritto a mano, tipicamente dentro un blocco HTML classico, non
 * un'istanza di core/button): classi di utilità applicabili via "Classi CSS
 * aggiuntive" o direttamente nell'HTML, stesso principio di Badge/Stat.
 *
 * Uso reale: il toggle tema chiaro/scuro nell'header (parts/header.html,
 * data-fm-theme-toggle) — era stilato con uno style inline provvisorio, il
 * commento in theme-toggle.js diceva letteralmente "Fase 6" come richiamo a
 * quando sarebbe arrivato il componente vero. Convertito a `.fm-icon-btn
 * is-variant-ghost` (icona minimale, adatta a un'icona di navigazione come
 * da descrizione dell'oracolo "close, nav"), 44px = taglia md di default.
 */
.fm-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--control--md);
	height: var(--wp--custom--control--md);
	flex: 0 0 var(--wp--custom--control--md);
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	transition:
		background var(--wp--custom--dur--fast) var(--wp--custom--ease--out),
		transform var(--wp--custom--dur--fast) var(--wp--custom--ease--snap),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

/* ---- Taglie — sm/lg via classe aggiuntiva, md è il default (nessuna classe) ---- */
.fm-icon-btn.is-size-sm { width: var(--wp--custom--control--sm); height: var(--wp--custom--control--sm); flex-basis: var(--wp--custom--control--sm); }
.fm-icon-btn.is-size-lg { width: var(--wp--custom--control--lg); height: var(--wp--custom--control--lg); flex-basis: var(--wp--custom--control--lg); }

/* ---- Varianti ---- */
.fm-icon-btn.is-variant-soft {
	background: var(--wp--custom--surface-sunken);
	color: var(--wp--custom--text-body);
	border: var(--wp--custom--border-width--hair) solid var(--wp--custom--border-subtle);
}
.fm-icon-btn.is-variant-ghost {
	background: transparent;
	color: var(--wp--custom--text-body);
	border: var(--wp--custom--border-width--hair) solid transparent;
}
.fm-icon-btn.is-variant-solid {
	background: var(--wp--preset--color--ink-950);
	color: var(--wp--custom--on-accent);
	border: var(--wp--custom--border-width--hair) solid var(--wp--preset--color--ink-950);
}
.fm-icon-btn.is-variant-flash {
	background: var(--wp--preset--gradient--flash);
	color: var(--wp--custom--on-accent);
	border: var(--wp--custom--border-width--hair) solid transparent;
}

/* ---- Attivo (es. wishlist attiva) — vince sulla variante, stesso principio del selected di Tag ---- */
.fm-icon-btn.is-active {
	background: var(--wp--custom--accent-soft);
	color: var(--wp--custom--accent);
	border-color: var(--wp--custom--border-brand);
}

@media (hover: hover) {
	.fm-icon-btn.is-variant-soft:hover:not(:disabled),
	.fm-icon-btn.is-variant-ghost:hover:not(:disabled) {
		background: var(--wp--custom--accent-soft);
		transform: translateY(-1px);
	}
	.fm-icon-btn.is-variant-flash:hover:not(:disabled) {
		box-shadow: var(--wp--custom--glow--flash);
		transform: translateY(-1px);
	}
	.fm-icon-btn.is-variant-solid:hover:not(:disabled) {
		transform: translateY(-1px);
	}
}

.fm-icon-btn:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}