/**
 * Fade transition helpers for Carousel Slider Block.
 * Core fade styles come from the full Swiper bundle.
 */

/* Avoid a brief horizontal slide before this plugin re-inits with effect:fade. */
.cb-carousel-block[data-cb-transition="fade"]:not(.cb-fade-active) .swiper-wrapper,
.cb-carousel-block.cb-fade:not(.cb-fade-active) .swiper-wrapper {
	transform: none !important;
}

/*
 * Covers inside slides size to their nested copy by default. With fade, that
 * makes each slide a different height. After JS equalizes, stretch covers to fill.
 */
.cb-carousel-block[data-cb-transition="fade"] .swiper-slide,
.cb-carousel-block.cb-fade .swiper-slide {
	box-sizing: border-box;
}

.cb-carousel-block[data-cb-transition="fade"] .swiper-slide > .wp-block-cover,
.cb-carousel-block.cb-fade .swiper-slide > .wp-block-cover {
	box-sizing: border-box;
	width: 100%;
}

.cb-carousel-block[data-cb-transition="fade"].cb-fade-sized .swiper-slide > .wp-block-cover,
.cb-carousel-block.cb-fade.cb-fade-sized .swiper-slide > .wp-block-cover {
	height: 100%;
}

/*
 * Parent theme clamps all covers to 180px under 600px. Let covers size to copy
 * for measurement, then fill the equalized slide height from JS.
 */
@media only screen and (max-width: 600px) {
	.cb-carousel-block[data-cb-transition="fade"] .swiper-slide > .wp-block-cover,
	.cb-carousel-block.cb-fade .swiper-slide > .wp-block-cover {
		height: auto !important;
		min-height: unset !important;
	}

	.cb-carousel-block[data-cb-transition="fade"].cb-fade-sized .swiper-slide > .wp-block-cover,
	.cb-carousel-block.cb-fade.cb-fade-sized .swiper-slide > .wp-block-cover {
		height: 100% !important;
	}
}