.container {
	--Carousel-gap: 8px;
	@apply relative w-screen max-w-full left-1/2 right-1/2 -ml-[50vw] -mr-[50vw];
}

.carousel__container {
	@apply overflow-y-hidden overflow-x-scroll snap-always;
	padding-block: calc(var(--focus-ring-width) + var(--focus-ring-offset));
	scrollbar-width: none !important;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.carousel__inner__container {
	@apply grid grid-flow-col gap-2 min-w-fit;
}

.carousel__inner__container::before,
.carousel__inner__container::after {
	content: '';
	display: block;
	--edge: calc((100vw - var(--page-max-width)) / 2);
	--min-edge: calc(var(--edge) - var(--Carousel-gap));
	--min-padding: calc(var(--page-padding-left) - var(--Carousel-gap));
	min-width: max(var(--min-edge), var(--min-padding));
}

.card__controls__container {
	@apply mt-12 flex justify-center items-center gap-2;
}

.icon__button {
	@apply flex justify-center items-center text-xs text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] rounded-full w-10 h-10 p-4 bg-[var(--color-bg-quaternary)] hover:brightness-[125%] transition-colors disabled:cursor-not-allowed;
}

.icon__button svg {
	@apply flex-shrink-0;
}
