/**
 * eh-block global frontend styles
 */

/**
 * Slider
 */

.swiper {
	max-inline-size: 100%;
}

/* Wrapper */
.swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	block-size: 100%;
	inline-size: 100%;
	margin-block-end: 0;
	overflow: visible;
}

/* Slide */
.swiper-wrapper .swiper-slide {
	display: block;
	flex: 1 0 auto ;
	block-size: auto;
	max-block-size: var(--eh--slider--slide--height, auto);
	margin-block: 0;
	margin-inline-end: 0;
}


/* --- Controls --- */
.swiper-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--30);

	/* Navigation */
	.wp-block-buttons {
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--10);
		max-inline-size: 100%;
	}

	.wp-block-button .wp-element-button {
		--button--icon--size: 32px;

		flex: 1 0 auto;
		padding: 0;
		border: 0;
		border-radius: var(--wp--preset--border-radius--full);
	}

	.is-style-prev {
		order: 1;
	}

	.is-style-next {
		order: 3;
	}

	/* Pagination */
	.swiper-pagination.swiper-pagination {
		--swiper-pagination-color: var(--wp--preset--color--primary);
		--swiper-pagination-bullet-width: 4px;
		--swiper-pagination-bullet-height: 4px;
		--swiper-pagination-bullet-horizontal-gap: 0;
		--swiper-pagination-bullet-inactive-color: var(--wp--preset--color--gray-light);
		--swiper-pagination-bullet-inactive-opacity: 1;

		display: flex;
		position: relative;
		inset: auto !important;
		flex: 1;
		align-items: center;
		justify-content: center;
		order: 2;
		inline-size: 135px;
		max-inline-size: 100%;
		background-color: var(--wp--preset--color--gray-light);
		pointer-events: none;
	}


	.swiper-pagination-bullet {
		flex: 1;
		border-radius: 0;
		pointer-events: auto;
	}

	.swiper-navigation .wp-element-button.wp-block-button__link {
		block-size: auto;
		inline-size: auto;
		padding: 1rem;
		color: var(--wp--preset--color--base);
		cursor: pointer;
	}
}

/**
 * Background effects
 */
.wp-block-group.has-background-blur,
.wp-block-button.has-background-blur .wp-block-button__link {
	backdrop-filter: blur(var(--wp--custom--blur-radius, 15px)) !important;
}

.wp-block-group.has-background.has-background-opacity,
.wp-block-button.has-background-opacity .wp-block-button__link.has-background {
	background-color: color-mix(in sRGB, var(--wp--custom--color--background) var(--eh--background-color--opacity), transparent) !important;
}