/**
 * ProductsPeruvian – image arrows for Elementor / Atom buttons.
 *
 * Add one of these classes to the Atom/Button element:
 * - productsperuvian-arrow-after  -> arrow on the right
 * - productsperuvian-arrow-before -> arrow on the left
 */

:is(a, button, .elementor-button).productsperuvian-arrow-after,
.productsperuvian-arrow-after :is(a, button, .elementor-button),
:is(a, button, .elementor-button).productsperuvian-arrow-before,
.productsperuvian-arrow-before :is(a, button, .elementor-button) {
	position: relative;
	box-sizing: border-box;
	--productsperuvian-arrow-width: 30px;
	--productsperuvian-arrow-edge: 25px;
	--productsperuvian-arrow-gap: 12px;
}

/* Reserve a dedicated area for the arrow so it can never overlap the label. */
:is(a, button, .elementor-button).productsperuvian-arrow-after,
.productsperuvian-arrow-after :is(a, button, .elementor-button) {
	padding-right: calc(
		var(--productsperuvian-arrow-width) +
		var(--productsperuvian-arrow-edge) +
		var(--productsperuvian-arrow-gap)
	) !important;
}

:is(a, button, .elementor-button).productsperuvian-arrow-before,
.productsperuvian-arrow-before :is(a, button, .elementor-button) {
	padding-left: calc(
		var(--productsperuvian-arrow-width) +
		var(--productsperuvian-arrow-edge) +
		var(--productsperuvian-arrow-gap)
	) !important;
}

:is(a, button, .elementor-button).productsperuvian-arrow-after::after,
.productsperuvian-arrow-after :is(a, button, .elementor-button)::after,
:is(a, button, .elementor-button).productsperuvian-arrow-before::before,
.productsperuvian-arrow-before :is(a, button, .elementor-button)::before {
	content: "";
	background-image: url("https://productsperuvian.com/wp-content/uploads/2026/09/black-arrow.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: var(--productsperuvian-arrow-width);
	height: 100%;
	position: absolute;
	top: 0;
	border: none;
	border-radius: unset;
	box-shadow: none;
	transition: transform .3s ease;
	filter: brightness(0) invert(1);
	pointer-events: none;
}

:is(a, button, .elementor-button).productsperuvian-arrow-after::after,
.productsperuvian-arrow-after :is(a, button, .elementor-button)::after {
	right: var(--productsperuvian-arrow-edge);
}

:is(a, button, .elementor-button).productsperuvian-arrow-before::before,
.productsperuvian-arrow-before :is(a, button, .elementor-button)::before {
	left: var(--productsperuvian-arrow-edge);
	transform: rotate(180deg);
}

:is(a, button, .elementor-button).productsperuvian-arrow-after:hover::after,
.productsperuvian-arrow-after :is(a, button, .elementor-button):hover::after {
	transform: translateX(4px);
}

:is(a, button, .elementor-button).productsperuvian-arrow-before:hover::before,
.productsperuvian-arrow-before :is(a, button, .elementor-button):hover::before {
	transform: rotate(180deg) translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	:is(a, button, .elementor-button).productsperuvian-arrow-after::after,
	.productsperuvian-arrow-after :is(a, button, .elementor-button)::after,
	:is(a, button, .elementor-button).productsperuvian-arrow-before::before,
	.productsperuvian-arrow-before :is(a, button, .elementor-button)::before {
		transition: none;
	}
}