/**
 * Carrossel de scroll horizontal — reutilizável via data-carousel + classes .game-carousel*.
 */

.game-carousel {
	--carousel-fade: calc(var(--space-40) * 2); /* 2× tamanho do botão nav */
	--_mask-left:  black;
	--_mask-right: black;
	position: relative;
	display: flex;
	align-items: center;
}

.game-carousel.has-prev { --_mask-left:  transparent; }
.game-carousel.has-next { --_mask-right: transparent; }

.game-carousel-scroll {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x mandatory;
	-webkit-mask-image: linear-gradient(to right, var(--_mask-left), black var(--carousel-fade), black calc(100% - var(--carousel-fade)), var(--_mask-right));
	mask-image:         linear-gradient(to right, var(--_mask-left), black var(--carousel-fade), black calc(100% - var(--carousel-fade)), var(--_mask-right));
}

.game-carousel-scroll::-webkit-scrollbar {
	display: none;
}

/* top via token evita conflito com o translateY(4px) do :active nos botões */
.game-carousel-prev,
.game-carousel-next {
	position: absolute;
	top: calc(50% - var(--space-40) / 2);
	z-index: 1;
	opacity: 0;
	pointer-events: none;
}

.game-carousel-prev { left: 0; }
.game-carousel-next { right: 0; }

.game-carousel.has-prev .game-carousel-prev,
.game-carousel.has-next .game-carousel-next {
	opacity: 1;
	pointer-events: auto;
}

.game-carousel-prev .game-icon {
	transform: scaleX(-1);
}