@import "swiper/css";
@import "swiper/css/a11y";
@import "swiper/css/autoplay";
@import "swiper/css/navigation";
@import "swiper/css/pagination";
@import "swiper/css/effect-fade";
@import "swiper/css/effect-creative";

@keyframes csblo-preloader-spinner {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.wp-block-csblo-slides {

	& {
		--swiper-theme-color: #111;
		position: relative;
		box-sizing: border-box;
	}

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	.swiper {
		overflow: clip; // Use clip instead of hidden to avoid Firefox positioning context issues
	}

	// Preloader
	&::after {
		display: none; // Hide by default if .csblo-preloader-spinner is not set
		content: '';
		position: absolute;
		inset: 50px auto auto 50%;
		width: var(--csblo--slides--preloader-size, 40px);
		height: var(--csblo--slides--preloader-size, 40px);
		margin: 0 0 0 calc(var(--csblo--slides--preloader-size, 40px) / -2);
		border: var(--csblo--slides--preloader-thickness, 4px) solid #f3f3f3;
		border-top: var(--csblo--slides--preloader-thickness, 4px) solid var(--csblo--slides--preloader-color, #9f9fa1);
		border-radius: 50%;
		z-index: 3;
		opacity: 0; // Hidden by default
		transform: translate3d(0, 0, 0); // Force GPU acceleration
		will-change: transform, opacity; // Hint to browser about animation
		pointer-events: none; // Avoid hit testing
		animation: none; // No animation by default
	}

	// Show preloader when loading
	&.csblo-preloader-spinner::after {
		display: block;
	}
	&.csblo-preloader-spinner:has(.swiper.loading) {
		&::after {
			opacity: 1;
			animation: csblo-preloader-spinner 1s linear infinite;
		}
	}

	// Hide swiper during loading
	.swiper.loading {
		opacity: 0;
		pointer-events: none;
		
		& + .wp-block-csblo-slides__prevnext {
			opacity: 0;
			pointer-events: none;
		}
	}

	// Smooth transition for content
	.swiper {
		transition: opacity .3s ease;
	}

	// Query-based sliders has auto height
	.swiper-wrapper:not(.wp-block-csblo-slide-post-template) {
		height: var(--csblo--slides--height, 400px);
	}

	// Allows auto height only for horizontal slides
	&.is-auto-height .swiper-horizontal .swiper-wrapper {
		height: auto;
	}

	&.has-background-parallax {

		// Center the enlarged background by offsetting left by -1.25x (0.5x provides buffer for overscroll/elastic bounce)
		.swiper.swiper-horizontal > .csblo-slides__image-background,
		.swiper.swiper-horizontal > .csblo-slides__video-background {
			width: calc(100% + (var(--csblo--slides--background-parallax, 200px) * 2.5));
			left: calc(var(--csblo--slides--background-parallax, 200px) * -1.25);
			right: auto;
		}

		.swiper.swiper-vertical > .csblo-slides__image-background,
		.swiper.swiper-vertical > .csblo-slides__video-background {
			height: calc(100% + (var(--csblo--slides--background-parallax, 200px) * 2.5));
			top: calc(var(--csblo--slides--background-parallax, 200px) * -1.25);
			bottom: auto;
		}
	}

	.swiper-slide {
		height: auto; // Stretch all slides by default
	}

	// Navigation
	.wp-block-csblo-slides__prevnext {
		position: absolute;
		inset: 0;
		z-index: 10;
		pointer-events: none;
		justify-content: var(--csblo--slides--nav-justify, space-between);
		align-items: var(--csblo--slides--nav-align, center);
		display: flex;
		gap: 5px;
		font-size: var(--csblo--slides--nav-size-fluid, var(--csblo--slides--nav-size, 35px));
		padding: 5px;
		margin: 0;
	}
	.wp-block-csblo-slides__prev,
	.wp-block-csblo-slides__next {

		& {
			cursor: pointer;
			pointer-events: all;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 0;
			border-radius: var(--csblo--slides--nav-radius, 50%);
			border-style: solid;
			border-width: var(--csblo--slides--nav-width-border, 0);
			border-color: var(--csblo--slides--nav-color-border, currentColor);
			color: var(--csblo--slides--nav-color, #fff);
			background-color: var(--csblo--slides--nav-bg-color, rgb(90 90 90 / 25%));
			backdrop-filter: var(--csblo--slides--nav-backdrop-filter, blur(16px) saturate(180%) brightness(100%));
			font-size: 1em;
			width: 1em;
			height: 1em;
			transition: opacity 0.2s ease;
			vertical-align: middle;
		}


		svg {
			width: 0.9em;
			height: auto;
			fill: currentcolor;
		}

		&.swiper-button-disabled {
			opacity: 0.3;
		}
	
		&.swiper-button-lock {
			display: none;
		}
	}
	.wp-block-csblo-slides__prev {
		transform: scaleX(-1);
	}
	.swiper-rtl + .wp-block-csblo-slides__prevnext {
		.wp-block-csblo-slides__prev {
			transform: scaleX(1);
		}
		.wp-block-csblo-slides__next {
			transform: scaleX(-1);
		}
	}
	.swiper-vertical + .wp-block-csblo-slides__prevnext {

		& {
			flex-direction: column;
		}

		.wp-block-csblo-slides__prev {
			transform: rotate(-90deg);
		}

		.wp-block-csblo-slides__next {
			transform: rotate(90deg);
		}
	}
	&.is-navigation-below {
		.wp-block-csblo-slides__prevnext {
			position: static;
		}
		.wp-block-csblo-slides__prev,
		.wp-block-csblo-slides__next {
			background-color: var(--csblo--slides--nav-bg-color, rgb(90 90 90 / 100%));
		}
	}
	&.is-navigation-hover-reveal:not(:hover):not(:focus-within) {

		.wp-block-csblo-slides__prev,
		.wp-block-csblo-slides__next {
			@media (hover: hover) {
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
			}
		}
	}
	&.hide-navigation-desktop-large {
		@media (min-width: 1200px) {
			.wp-block-csblo-slides__prev,
			.wp-block-csblo-slides__next {
				display: none;
			}
		}
	}
	&.hide-navigation-desktop {
		@media (min-width: 992px) and (max-width: 1199px) {
			.wp-block-csblo-slides__prev,
			.wp-block-csblo-slides__next {
				display: none;
			}
		}
	}
	&.hide-navigation-tablet {
		@media (min-width: 768px) and (max-width: 991px) {
			.wp-block-csblo-slides__prev,
			.wp-block-csblo-slides__next {
				display: none;
			}
		}
	}
	&.hide-navigation-mobile-landscape {
		@media (min-width: 600px) and (max-width: 767px) {
			.wp-block-csblo-slides__prev,
			.wp-block-csblo-slides__next {
				display: none;
			}
		}
	}
	&.hide-navigation-mobile-portrait {
		@media (max-width: 599px) {
			.wp-block-csblo-slides__prev,
			.wp-block-csblo-slides__next {
				display: none;
			}
		}
	}

	// Pagination
	.swiper-pagination {

		& {
			pointer-events: none;
		}

		.swiper-pagination-bullet {
			pointer-events: all;
		}
	}
	.swiper-pagination-bullet {
		border-style: solid;
		border-width: var(--csblo--slides--pagination-bullet-width-border, 0);
		border-color: var(--csblo--slides--pagination-bullet-color-border, currentColor);
	}
	.swiper-pagination-bullets:not(.swiper-pagination-bullets-dynamic) {
		display: flex;
		justify-content: var(--csblo--slides--pagination-bullet-justify, center);
		align-items: var(--csblo--slides--pagination-bullet-align, center);
		gap: var(--csblo--slides--pagination-bullet-spacing, var(--swiper-pagination-bullet-horizontal-gap, 8px));
		padding: 0 8px;

		&.swiper-pagination-vertical {
			height: 100%;
			top: 0;
			transform: none;
			padding: 8px 0;
			flex-direction: column;
			gap: var(--csblo--slides--pagination-bullet-spacing, var(--swiper-pagination-bullet-vertical-gap, 6px));
		}

		.swiper-pagination-bullet {
			transition: width 300ms, height 300ms;

			// High specificity to override Swiper default margin
			&[class] {
				margin: 0;
			}
		}
		.swiper-pagination-bullet-active {
			width: var(--csblo--slides--pagination-bullet-active-width, var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)));
			height: var(--csblo--slides--pagination-bullet-active-height, var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)));
		}
	}
	.swiper-rtl.swiper-vertical .swiper-pagination-bullets:not(.swiper-pagination-bullets-dynamic).swiper-pagination-vertical {
		rotate: 180deg;
		flex-direction: column-reverse;
	}
	.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
		width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
	}
	&.is-pagination-bullets-hover-reveal:not(:hover):not(:focus-within) {

		.swiper-pagination-bullets {
			@media (hover: hover) {
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
			}
		}
	}
	&.hide-pagination-bullets-desktop-large {
		@media (min-width: 1200px) {
			.swiper-pagination-bullets {
				display: none;
			}
		}
	}
	&.hide-pagination-bullets-desktop {
		@media (min-width: 992px) and (max-width: 1199px) {
			.swiper-pagination-bullets {
				display: none;
			}
		}
	}
	&.hide-pagination-bullets-tablet {
		@media (min-width: 768px) and (max-width: 991px) {
			.swiper-pagination-bullets {
				display: none;
			}
		}
	}
	&.hide-pagination-bullets-mobile-landscape {
		@media (min-width: 600px) and (max-width: 767px) {
			.swiper-pagination-bullets {
				display: none;
			}
		}
	}
	&.hide-pagination-bullets-mobile-portrait {
		@media (max-width: 599px) {
			.swiper-pagination-bullets {
				display: none;
			}
		}
	}
	&.is-pagination-top {
		--swiper-pagination-top: 8px;
		--swiper-pagination-bottom: auto;
		--swiper-pagination-left: 8px;
		--swiper-pagination-right: auto;
	}

	// Background media
	.csblo-slides__image-background,
	.csblo-slides__video-background {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		outline: none;
		border: none;
		box-shadow: none;
		z-index: 0;
	}
}