/*!
* Components/SwiperCarousel
*/

.s-carousel {
	--swiper-theme-color: rgb(var(--x-sys-color-inverse-surface));
	--swiper-pagination-bullet-height: 0.875rem;
	--swiper-pagination-bullet-width: 0.875rem;
}

.s-carousel .s-carousel__controls {
	align-items: center;
	bottom: 0;
	display: flex;
	height: 100%;
	justify-content: space-between;
	left: 0;
	list-style-type: none;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 10;
}

.s-carousel .s-carousel__controls > * {
	pointer-events: auto;
}

.s-carousel .s-carousel__prev.x-btn--lock,
.s-carousel .s-carousel__next.x-btn--lock {
	display: none !important;
}

.s-carousel .s-carousel__prev.x-btn--disabled,
.s-carousel .s-carousel__next.x-btn--disabled {
	opacity: 0;
}

.s-carousel .swiper-horizontal > .swiper-pagination-bullets,
.s-carousel .swiper-pagination-bullets.swiper-pagination-horizontal,
.s-carousel .swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom: 1.25rem;
}

.s-carousel .swiper-pagination-bullets {
	line-height: 1;
}

.s-carousel.lg\:s-carousel--show-navigation-hover .s-carousel__prev,
.s-carousel.lg\:s-carousel--show-navigation-hover .s-carousel__next {
	opacity: 0;
}

.s-carousel.lg\:s-carousel--show-navigation-hover .s-carousel__prev {
	transform: translateX(-50%);
}

.s-carousel.lg\:s-carousel--show-navigation-hover .s-carousel__next {
	transform: translateX(50%);
}

.s-carousel.lg\:s-carousel--show-navigation-hover:hover .s-carousel__prev,
.s-carousel.lg\:s-carousel--show-navigation-hover:hover .s-carousel__next {
	opacity: 1;
	transform: translateX(0);
}

.s-carousel.s-carousel--pagination-bottom-center > .swiper-pagination {
	margin-inline-end: auto;
	margin-inline-start: auto;
}

.s-carousel.s-carousel--pagination-static > .swiper-pagination {
	position: static;
}

.s-carousel.s-carousel--pagination-static.swiper-horizontal
	> .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.s-carousel.s-carousel--pagination-static
	> .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
	margin-top: 1.25rem;
	text-align: start;
	transform: none;
}