/*------------------------------------*\
    
    WebFX Swiper customizations - shared styling for all Swiper instances

    Target Swiper core classes (for example .swiper, .swiper-wrapper, .swiper-slide,
    .swiper-button-prev, .swiper-button-next, .swiper-pagination) when a rule should
    apply site-wide after the vendor bundle in assets/css/plugins/swiper.css.

    For one-off carousels or block layout, prefer overrides in that block's stylesheet
    (for example assets/css/blocks/...) and scope selectors under the block root.

\*------------------------------------*/

:root {
    --swiper-navigation-size: 3.125rem;
    --swiper-theme-color: var(--color-white);
    --swiper-pagination-progressbar-size: 0.625rem;
    --swiper-pagination-progressbar-bg-color: var(--color-gray-100);
    --swiper-pagination-color: var(--color-gray-200);
}

.swiper {
    overflow: visible;
}

.swiper-slide {
    height: auto;
    transition: opacity 0.1s;
}

.swiper-slide:not(.swiper-slide-visible) {
    opacity: 0;
    pointer-events: none;
}

.swiper-slide.swiper-slide-visible {
    opacity: 1;
}

.swiper-controls {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    position: relative;
    opacity: 0;
}

.swiper-root:not(:has(.swiper-initialized)) .swiper-controls-root,
.swiper-controls-root:has(.swiper-button-prev.swiper-button-lock):has(.swiper-button-next.swiper-button-lock) {
    display: none;
}

.swiper-root:has(.swiper-initialized ) .swiper-controls {
    opacity: 1;
}

.swiper-button-prev,
.swiper-button-next {
    margin-top: 0;
    position: static;
    font-family: "icomoon";
    border-radius: 50%;
    background-color: var(--color-blue-400);
}

.swiper-button-prev:before,
.swiper-button-next:before {
    content: "\e901";
}

.swiper-button-prev:before {
    transform: rotate(180deg);
}

.swiper-pagination {
    position: static;
}

.swiper-pagination-progressbar {
    border-radius: calc(var(--swiper-pagination-progressbar-size) / 2);
}

.swiper-progress-fake-fill {
    height: 0.625rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100px;
    background-color: var(--color-gray-200);
    transition: width 0.3s;
}

.swiper-pagination-progressbar-fill {
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .swiper-button-prev,
    .swiper-button-next {
        transition: background-color 0.3s;
    }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        background-color: var(--color-navy-900);
    }
}