/**
 * Block Name: acf/carousel
 * Description: Carousel block with slide children and basic controls for changing the functionality of Swiper.
 *
 */

/* Remove Swiper navigation icons. */
.block__acf-carousel .block__acf-carousel__swiper-container .swiper-button-next::after,
.block__acf-carousel .block__acf-carousel__swiper-container .swiper-button-prev::after {
    content: unset;
}

/* Pagination set position. */
.block__acf-carousel .swiper-pagination {
    top: calc(100% + 1rem);
}

/* Pagination set active bullet color. */
.block__acf-carousel .swiper-pagination-bullet-active {
    background: var(--wp--preset--color--deep-space);
}

.has-deep-space-background-color .block__acf-carousel .swiper-pagination-bullet {
    background: var(--wp--preset--color--gray-04);
}

.has-deep-space-background-color .block__acf-carousel .swiper-pagination-bullet-active {
    background: var(--wp--preset--color--white);
}

.block__acf-carousel .block__acf-carousel__swiper-button-prev svg,
.block__acf-carousel .block__acf-carousel__swiper-button-next svg {
	/* color: var(--wp--preset--color--deep-space); */
}

/* Default .swiper-pagination styles without position attribute */
.block__acf-carousel__swiper-pagination {
    /* position: absolute; */
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

.block__acf-carousel__swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom, 8px);
    /* top: var(--swiper-pagination-top, auto); */
    left: 0;
    width: 100%;
}

.block__acf-carousel__swiper-pagination-horizontal .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

/* Prevent visual disturbance while swiper is initializing */
body:not(.wp-admin) .block__acf-carousel .swiper-container,
body:not(.block-editor-iframe__body) .block__acf-carousel .swiper-container {
	opacity: 0;
	transition: opacity 0.3s ease;
}

body:not(.wp-admin) .block__acf-carousel .swiper-container.swiper-initialized,
body:not(.block-editor-iframe__body) .block__acf-carousel .swiper-container.swiper-initialized {
	opacity: 1;
}

/* Make images in carousel clickable with pointer cursor */
.block__acf-carousel-slide img.block__acf-carousel-slide__image {
	cursor: pointer;
}

html.rtl .block__acf-carousel,
body.rtl .block__acf-carousel {
}