/* MM Button Icon — frontend + editor styles */

/* Make the button link a flex row so icon and text sit side by side */
.wp-block-button__link:has( > .mm-btn-icon ) {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

/* The icon span itself */
.mm-btn-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor; /* overridden by inline style when a colour is chosen */
	-webkit-mask-image: var( --mm-icon-url );
	        mask-image: var( --mm-icon-url );
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	line-height: 0;
	vertical-align: middle;
}

/* Fallback for browsers without :has() — flex is set via a JS-added class */
.wp-block-button__link.has-mm-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}