/**
 * Optional icons for Core Button blocks.
 *
 * Individual modifier classes supply the SVG mask.
 * Shared sizing and alignment for optional Core Button icons.
 */
.wp-block-button[class*="thula-button--icon-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.wp-block-button[class*="thula-button--icon-"] .wp-block-button__link::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;

	height: 1.3rem;
	width: auto;
	aspect-ratio: var(--thula-button-icon-ratio, 1 / 1);

	background-color: currentColor;

	-webkit-mask-image: var(--thula-button-icon);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;

	mask-image: var(--thula-button-icon);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* Arrow. */
.wp-block-button.thula-button--icon-arrow {
	--thula-button-icon: url("../images/icons/button-icons/arrow-right.svg");
}

/* Download. */
.wp-block-button.thula-button--icon-download {
	--thula-button-icon: url("../images/icons/button-icons/download.svg");
}

/* External link. */
.wp-block-button.thula-button--icon-external {
	--thula-button-icon: url("../images/icons/external-link.svg");
}