/**
 * Button Icon — front-end + editor-canvas styles. Tokens only. Front end: link
 * .le-has-icon + span .le-btn-icon--before/--after. Editor canvas: wrapper
 * .le-btn-has-icon + .le-btn-icon-pos-before/after (pseudo-element preview).
 */

/* ---- 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);
}

/* content-box: width/height size the glyph; padding/border grow the box around it. */
.wp-block-button__link.le-has-icon .le-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	line-height: 0;
	flex-shrink: 0;
	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;
}

/* WP icons carry no fill attribute, so fill:currentColor makes them follow 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: 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);
}

/* Baked background-image (not a mask) so border/radius/bg paint; content-box for padding. */
.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;
}

/* Canvas hover swaps only the background box (glyph-color hover is front-end-exact only). */
.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 .le-icon-* rules live in editor.css (outer frame); must not ship here. */