/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Core Button icon extension (frontend) */
.wp-block-button.r2r-has-icon .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 1rem;
	padding-inline: 1rem;
}

.wp-block-button.r2r-has-icon.r2r-icon-right .wp-block-button__link {
	flex-direction: row-reverse;
}

.wp-block-button.r2r-has-icon .wp-block-button__link::before {
	background-color: currentColor;
	content: '';
	display: inline-block;
	flex: 0 0 auto;
	height: 1.3em;
	width: 1.3em;
	mask-image: var(--r2r-button-icon-mask);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: var(--r2r-button-icon-mask);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.wp-block-button.r2r-has-icon.r2r-icon-size--large .wp-block-button__link {
	gap: 0.8rem;
}

.wp-block-button.r2r-has-icon.r2r-icon-size--large .wp-block-button__link::before {
	height: 1.9em;
	width: 1.9em;
}

.wp-block-button.r2r-has-icon .wp-block-button__link::before {
	margin: -0.25rem;
}

:root :where(.r2r-card-group) {
	gap: 2rem;
}