/**
 * Button icons — front end and editor canvas.
 *
 * A `has-icon-<name>` class on a core/button block draws that icon inside the
 * button: after the label by default, before it with `campweb-icon-left`.
 *
 * Each icon is a single custom property. The pseudo-element that paints it is
 * declared once and masks `currentColor` through whatever the property holds,
 * so the icon always matches the button's text color and adding an icon means
 * adding one rule below. The names here are the ones offered by the editor
 * panel in src/button-icon/theme-icons.js — keep the two lists in step.
 *
 * Icons from the WordPress Icons API (`has-icon-<collection>--<name>`) have no
 * rule here: their property arrives inline on the wrapper, from render.php on
 * the front end and from the editor script in the canvas.
 */

/* Until a property arrives — an Icons API icon still loading in the editor, or
   one no longer registered — mask everything away rather than paint the solid
   square an unset mask would leave. :where() keeps this below every rule
   and inline style that does set it. */
:where(.wp-block-button[class*="has-icon-"]) {
	--campweb--button-icon: linear-gradient(transparent, transparent);
}

.wp-block-button.has-icon-arrow-right {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Straight horizontal arrow */
.wp-block-button.has-icon-arrow-long-right {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
}

/* North-east arrow */
.wp-block-button.has-icon-arrow-up-right {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
}

.wp-block-button.has-icon-external {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
}

.wp-block-button.has-icon-download {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}

.wp-block-button.has-icon-plus {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

.wp-block-button.has-icon-check {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.wp-block-button.has-icon-play {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 3 19 12 5 21 5 3'/></svg>");
}

.wp-block-button.has-icon-star {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

.wp-block-button.has-icon-mail {
	--campweb--button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><polyline points='2 6 12 13 22 6'/></svg>");
}

/* The icon itself. Painted on ::after so it follows the label, or on ::before
   when `campweb-icon-left` asks for it ahead of the label — the inline start,
   so it mirrors correctly in RTL. The `[class*="has-icon-"]` gate is what makes
   the pseudo-element appear at all, which is why the side class deliberately
   carries a different prefix: a button positioned but given no icon must stay
   untouched rather than reserve an empty box. */
.wp-block-button[class*="has-icon-"]:not(.campweb-icon-left) .wp-block-button__link::after,
.wp-block-button[class*="has-icon-"].campweb-icon-left .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-top: -2px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-image: var(--campweb--button-icon);
	mask-image: var(--campweb--button-icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.wp-block-button[class*="has-icon-"]:not(.campweb-icon-left) .wp-block-button__link::after {
	margin-inline-start: 0.4em;
}

.wp-block-button[class*="has-icon-"].campweb-icon-left .wp-block-button__link::before {
	margin-inline-end: 0.4em;
}