/**
 * Core button block: Forward Arrow variants (frontend).
 * Uses mask + background-color so --brightstone-arrow-color can override defaults.
 */
.is-style-forward-arrow > .wp-block-button__link::after,
.is-style-forward-arrow--inverted > .wp-block-button__link::after,
.wp-block-button.is-style-forward-arrow--blue .wp-block-button__link::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5em;
	-webkit-mask-image: url(../assets/images/right-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: url(../assets/images/right-arrow.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.is-style-forward-arrow > .wp-block-button__link::after {
	width: 0.75rem;
	height: 0.75rem;
	background-color: var(--brightstone-arrow-color, #01151c);
}

.is-style-forward-arrow--inverted > .wp-block-button__link::after {
	width: 1rem;
	height: 1rem;
	background-color: var(--brightstone-arrow-color, #ffffff);
}

.wp-block-button.is-style-forward-arrow--blue .wp-block-button__link::after {
	width: 1rem;
	height: 1rem;
	background-color: var(--brightstone-arrow-color, #32a4ca);
}