/* ─── SWIPER BUTTONS ──────────────────────────────────────────── */

.swiper-buttons {
	display: flex;
	align-items: center;
	gap: max(1rem, calc(1 * var(--su)));
}

.noix-swiper-button {
	width: max(1.5rem, calc(1.5 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--noix-blue);
	color: var(--noix-almond);
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	overflow: hidden;
	outline: 1px solid var(--noix-blue);
	outline-offset: -1px;
	transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.noix-swiper-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 30%;
	height: auto;
	aspect-ratio: 1;
	background-color: currentColor;
    --mask-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.588379 4.70589H8.82367M4.70603 8.82354L8.82367 4.70589L4.70603 0.588242' stroke='%23EDEAE5' stroke-width='1.17647' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	mask-image: var(--mask-image);
	-webkit-mask-image: var(--mask-image);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	transition: transform 0.2s ease-in-out;
	z-index: 2;
}

.noix-swiper-button.swiper-button-default-prev::before {
	transform: rotate(180deg);
}

.noix-swiper-button:hover::before, .noix-swiper-button:active::before {
	background-color: var(--noix-chestnut);
}

.noix-swiper-button.swiper-button-disabled {
	opacity: .6;
}