/**
 * Button Icon — front-end + editor-canvas styles. Tokens only.
 *
 * Front end (real inline <svg> injected by extension.php):
 *   link gets .le-has-icon; the icon span is .le-btn-icon--before/--after.
 * Editor canvas (CSS mask preview driven by editor.js custom properties):
 *   wrapper gets .le-btn-has-icon + .le-btn-icon-pos-before/after.
 */

/* ---- Front-end: real inline SVG ---------------------------------------- */
.wp-block-button__link.le-has-icon {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.44rem);
}

.wp-block-button__link.le-has-icon .le-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box; /* width/height = glyph; padding/border grow the box around it */
	line-height: 0;
	flex-shrink: 0;
	/* color/background via vars so the :hover rule below can override them */
	color: var(--le-icon-color, currentColor);
	background-color: var(--le-icon-bg, transparent);
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover (driven by the button link). Falls back to the resting value. */
.wp-block-button__link.le-has-icon:hover .le-btn-icon {
	color: var(--le-icon-hover-color, var(--le-icon-color, currentColor));
	background-color: var(--le-icon-hover-bg, var(--le-icon-bg, transparent));
}

.le-btn-icon > svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Finish-specific fill/stroke (native WP icons carry no fill attribute, so they
   need fill:currentColor to follow the button text color). */
.le-btn-fin-filled > svg,
.le-btn-fin-wp > svg {
	fill: currentColor;
	stroke: none;
}

.le-btn-fin-stroke > svg {
	fill: none;
	stroke: currentColor;
}

.le-btn-icon--before {
	order: -1;
}

.le-btn-icon--after {
	order: 1;
}

/* ---- Editor canvas: mask pseudo-element preview ------------------------- */
.le-btn-has-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.44rem);
}

/* The glyph is a baked background-image (NOT a mask) so border, radius and
   background paint normally in the editor too. content-box so padding grows the
   box around the glyph (mirrors the front-end span). */
.le-btn-has-icon .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	order: -1;
	box-sizing: content-box;
	width: var(--le-btn-icon-size, 1em);
	height: var(--le-btn-icon-size, 1em);
	padding: var(--le-btn-icon-pad, 0);
	margin: var(--le-btn-icon-margin, 0);
	border: var(--le-btn-icon-border, 0 solid transparent);
	border-radius: var(--le-btn-icon-radius, 0);
	background-color: var(--le-btn-icon-bg, transparent);
	background-image: var(--le-btn-icon-url);
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.le-btn-has-icon.le-btn-icon-pos-after .wp-block-button__link::before {
	order: 1;
}

/* Hover preview in the canvas — swap the background box (glyph-color hover is
   front-end-exact only, since the glyph is a baked image here). */
.le-btn-has-icon .wp-block-button__link:hover::before {
	background-color: var(--le-btn-icon-hover-bg, var(--le-btn-icon-bg, transparent));
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-button__link.le-has-icon .le-btn-icon {
		transition: none;
	}
}

/* Inspector "Icon styles" panel CSS (the .le-icon-* rules) lives in editor.css,
   loaded in the outer editor frame — it must NOT ship here, because style.css is
   routed into the canvas iframe (add_editor_style) and served on the front end. */