/**
 * Botão (core/button) — seta opcional via classe no wrapper.
 *
 * Editor: painel «Seta do botão» → has-arrow-icon-left | has-arrow-icon-right
 * Legado: has-arrow-icon / is-style-with-arrow (= direita).
 *
 * A seta usa assets/images/button-arrow-right.svg como máscara (currentColor).
 */

.wp-block-button:is(
	.has-arrow-icon,
	.has-arrow-icon-right,
	.has-arrow-icon-left,
	.is-style-with-arrow
) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.61em;
}

/* Direita — ::after */
.wp-block-button:is(
	.has-arrow-icon,
	.has-arrow-icon-right,
	.is-style-with-arrow
) .wp-block-button__link::after {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 12px;
	height: 11px;
	margin-inline-start: 0.24em;
	background-color: currentColor;
	-webkit-mask-image: url("../../images/button-arrow-right.svg");
	mask-image: url("../../images/button-arrow-right.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Esquerda — ::before (SVG espelhado) */
.wp-block-button.has-arrow-icon-left .wp-block-button__link::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 12px;
	height: 11px;
	margin-inline-end: 0.24em;
	background-color: currentColor;
	-webkit-mask-image: url("../../images/button-arrow-right.svg");
	mask-image: url("../../images/button-arrow-right.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transform: scaleX(-1);
}

/* Contorno — transição do hover (cores definidas no theme.json). */
.wp-block-button.is-style-outline .wp-block-button__link {
	transition:
		color 0.28s ease,
		background-color 0.28s ease,
		border-color 0.28s ease;
}

.wp-block-button.is-style-outline:is(
	.has-arrow-icon,
	.has-arrow-icon-right,
	.has-arrow-icon-left,
	.is-style-with-arrow
) .wp-block-button__link::after,
.wp-block-button.is-style-outline.has-arrow-icon-left .wp-block-button__link::before {
	transition: background-color 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-outline .wp-block-button__link,
	.wp-block-button.is-style-outline:is(
		.has-arrow-icon,
		.has-arrow-icon-right,
		.has-arrow-icon-left,
		.is-style-with-arrow
	) .wp-block-button__link::after,
	.wp-block-button.is-style-outline.has-arrow-icon-left .wp-block-button__link::before {
		transition: none;
	}
}