/**
 * ZARE Theme icon foundation.
 *
 * Inline SVG is rendered only from the curated local registry. Icons inherit
 * currentColor and never create interaction state or business semantics.
 */

:root,
body {
	--zare-theme-icon-compact-inline-size: var(--wp--custom--zare-experience--icon--xs, 1rem);
	--zare-theme-icon-standard-inline-size: var(--wp--custom--zare-experience--icon--sm, 1.25rem);
	--zare-theme-icon-control-size: var(--wp--custom--zare-experience--icon--sm, 1.25rem);
	--zare-theme-icon-emphasis-size: var(--wp--custom--zare-experience--icon--md, 1.5rem);
	--zare-theme-icon-display-size: var(--wp--custom--zare-experience--icon--lg, 2rem);
	--zare-theme-icon-compact-inline-gap: 0.25rem;
	--zare-theme-icon-standard-inline-gap: 0.375rem;
}

.wp-block-icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.zare-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	color: currentColor;
}

.zare-icon--xs {
	width: 1rem;
	height: 1rem;
}

.zare-icon--sm {
	width: 1.25rem;
	height: 1.25rem;
}

.zare-icon--md {
	width: 1.5rem;
	height: 1.5rem;
}

.zare-icon--lg {
	width: 2rem;
	height: 2rem;
}

.zare-icon--xl {
	width: 2.5rem;
	height: 2.5rem;
}

/* Keep icon-only wrappers compact while leaving the 44px touch target to the owning control. */
.zare-icon-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}