/*
 * Image Carousel widget.
 *
 * Swiper brings its own stylesheet; what is here is the parts that are ours —
 * the slide, its caption, and the arrows, which are drawn as round buttons
 * outside the track rather than over the pictures.
 */
.ekl-carousel {
    --ekl-carousel-arrow: 40px;

    @apply relative w-full;
}

.ekl-carousel__slide {
    @apply block overflow-hidden;

    img {
        @apply block h-auto w-full;
    }
}

.ekl-carousel__caption {
    @apply pt-[10px] text-center text-[14px] leading-[1.5] text-ekl-neutral-700;
}

.ekl-carousel {
    .swiper-button-next,
    .swiper-button-prev {
        @apply flex items-center justify-center rounded-full bg-white text-ekl-secondary shadow-[0_2px_12px_rgba(0,0,0,0.12)];

        width: var(--ekl-carousel-arrow);
        height: var(--ekl-carousel-arrow);
        margin-top: calc(var(--ekl-carousel-arrow) / -2);

        &::after {
            font-size: calc(var(--ekl-carousel-arrow) / 2.6);
        }
    }

    .swiper-pagination {
        @apply relative mt-[14px];
    }
}

/* Pause / Play (assets/js/carousel-a11y.js). A real button, kept clear of the arrows. */
.ekl-carousel .ek-carousel-pause {
    @apply absolute right-[8px] top-[8px] z-10 flex h-[36px] w-[36px] cursor-pointer items-center justify-center rounded-full border-0 bg-black/55 p-0 text-white transition-colors duration-200 hover:bg-black/80;

    &:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.7);
    }
}

/* Where there is a keyboard, it has to see where it is. */
.ekl-carousel .swiper-button-next,
.ekl-carousel .swiper-button-prev,
.ekl-carousel .swiper-pagination-bullet {
    &:focus-visible {
        outline: 2px solid var(--color-ekl-brand);
        outline-offset: 2px;
    }
}

/*
 * A theme styles every button (Hello Elementor: crimson with white text on hover
 * and focus, nowrap, centred, a 1px border). The rules below say every state
 * outright, one class deeper than the theme's [type=button]:hover, so the
 * button looks the way this widget says whatever the theme does. A style
 * control in the panel is still more specific than these.
 * Checked against the real theme in tests/test-theme-buttons.php.
 */

.ekl-carousel .ek-carousel-pause,
.ekl-carousel .ek-carousel-pause:hover,
.ekl-carousel .ek-carousel-pause:focus,
.ekl-carousel .ek-carousel-pause:active {
    padding: 0;
    border: 0;
    border-radius: 9999px;
    color: #fff;
    text-decoration: none;
}

.ekl-carousel .ek-carousel-pause {
    background-color: rgba(0, 0, 0, 0.55);
}

.ekl-carousel .ek-carousel-pause:hover,
.ekl-carousel .ek-carousel-pause:focus,
.ekl-carousel .ek-carousel-pause:active {
    background-color: rgba(0, 0, 0, 0.8);
}