.swiper-buttons {
	display: flex;
	flex-shrink: 0;
	gap: max(0.375rem, calc(0.5 * var(--su)));
}

.swiper-buttons .swiper-button {
	display: grid;
	place-items: center;
	width: max(2.5rem, calc(3 * var(--su)));
	aspect-ratio: 1;
	padding: 0;
	color: var(--dc-black);
	background-color: var(--dc-white);
	border: 1px solid var(--dc-white);
	border-radius: var(--border-radius-small);
	cursor: pointer;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.swiper-buttons .swiper-button::before {
	content: "\e5c8";
	font-family: "Material Symbols Outlined";
	font-size: max(1.25rem, calc(1.5 * var(--su)));
	line-height: 1;
	transition: translate 0.3s ease-in-out;
}

.swiper-buttons .swiper-button-prev-custom::before {
	content: "\e5c4";
}

.swiper-buttons .swiper-button:hover {
	color: var(--dc-white);
	background-color: transparent;
}

.swiper-buttons .swiper-button-next-custom:hover::before {
	translate: 0.125rem 0;
}

.swiper-buttons .swiper-button-prev-custom:hover::before {
	translate: -0.125rem 0;
}

.swiper-buttons .swiper-button:focus-visible {
	outline: 2px solid var(--dc-blue);
	outline-offset: 2px;
}

.swiper-buttons .swiper-button.is-disabled {
	color: var(--dc-white);
	background-color: transparent;
	opacity: 0.3;
	cursor: default;
}

.swiper-buttons .swiper-button.is-disabled::before {
	translate: none;
}

/* Swiper locks navigation when all slides fit */
.swiper-buttons .swiper-button.swiper-button-lock {
	display: none;
}