/*--------------------------------------------------------------
Carousel Reset
----------------------------------------------------------------*/


.pxl-swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.pxl-carousel-inner {
    overflow: hidden;
}

.pxl-swiper-container {
    margin-inline: calc(-1 * var(--x));
    position: relative;
    overflow: hidden;
    @media #{$max-lg} {
        --x: 15px;
    }
}
.pxl-swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: auto;
    height: 100%;
    position: relative;
    padding-inline: var(--x);
}

.pxl-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    .pxl-swiper-current-slide, .pxl-swiper-total-slides {
        font-size: 18px;
        font-weight: 700;
        color: #cccabf;
        margin: 0 14px;
        &:before {
            content: '0';
        }
    }
    .pxl-swiper-current-slide {
        color: #0a1316;
    }
}

.pxl-swiper-slider {
    position: relative;
    &.pxl-swiper-arrow-show .pxl-swiper-arrow {
        opacity: 1;
        visibility: visible;
    }
}

.pxl-swiper-nogap {
    .pxl-swiper-container {
        margin: 0;
        .pxl-swiper-slide {
            padding: 0;
        }
    }
}

.pxl-swiper-boxshadow {
    .pxl-carousel-inner {
        margin: -80px;
    }
    .pxl-swiper-container {
        padding: 80px;
    }
    .pxl-swiper-slide { 
        @include transition(opacity .25s ease-out);
        opacity: 0;
        &.swiper-slide-visible {
            opacity: 1;
            @include transition(opacity .25s ease-in);
        }
        // &:not(.swiper-slide-visible) {
        //     visibility: visible !important;
        //     animation: none !important;
        // }
    }
}

// .pxl-swiper-slider {
//     .pxl-swiper-slide { 
//         &.swiper-slide-visible {
//             visibility: visible !important;
//         }
//         &:not(.swiper-slide-visible) {
//             animation: none !important;
//             animation-delay: 0 !important;
//         }
//     }
// }

.pxl-swiper-thumbs {
    overflow: hidden;
    padding: 0 15px;
    .swiper-slide {
        cursor: pointer;
        padding: 0 15px;
    }
}
.swiper-container-vertical {
    height: 300px;
    .pxl-swiper-wrapper, .swiper-wrapper {
        flex-direction: column;
    }
    .pxl-swiper-slide, .swiper-slide {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

[data-slider-mode="fade"] .swiper-slide-active {
    z-index: 9;
}

.swiper-creative .pxl-swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform,opacity,height;
    transition-property: transform;
}
.swiper-3d .pxl-swiper-wrapper {
    transform-style: preserve-3d;
    transform: translate3d(0px,0,0);
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
}
.swiper-3d .swiper-cube-shadow, .swiper-3d .pxl-swiper-slide {
    transform-style: preserve-3d;
}

.swiper-vertical {
    touch-action: pan-x;
    > .pxl-swiper-wrapper {
        flex-direction: column;
    }
    &.swiper-backface-hidden {
        .pxl-swiper-slide {
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            height: auto !important;
        }
    }
}

.swiper-filter-active {
    .non-swiper-slide {
        display: none;
    }
}

.pxl-swiper-slider {
    .pxl-post--image img, .pxl-post--featured img {
        width: 100%;
    }
    .pxl-post--title, .pxl-post--category {
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
}


.pxl-navigation-carousel {
    .pxl-swiper-arrows {
        &.pxl-swiper-arrows1 {
            position: relative;
            width: 100%;
        }
    }
}

.pxl-swiper-slider {
    &.swiper-arrows-responsive-sm {
        @media #{$max-sm} {
            .pxl-carousel-inner {
                padding: 0 !important;
            }
            .pxl-swiper-arrows { 
                .pxl-swiper-arrow {
                    opacity: 0;
                    &.pxl-swiper-arrow-prev {
                        transform: translateX(-50px);
                    }
                    &.pxl-swiper-arrow-next {
                        transform: translateX(50px);
                    }
                }
            }
            &:hover {
                .pxl-swiper-arrows { 
                    .pxl-swiper-arrow {
                        opacity: 1;
                        transform: translateX(0)
                    }
                }
            }
        }
    }

    &.swiper-arrows-responsive-md {
        @media #{$max-md} {
            .pxl-carousel-inner {
                padding: 0 !important;
            }
            .pxl-swiper-arrows { 
                .pxl-swiper-arrow {
                    opacity: 0;
                    &.pxl-swiper-arrow-prev {
                        transform: translateX(-50px);
                    }
                    &.pxl-swiper-arrow-next {
                        transform: translateX(50px);
                    }
                }
            }
            &:hover {
                .pxl-swiper-arrows { 
                    .pxl-swiper-arrow {
                        opacity: 1;
                        transform: translateX(0)
                    }
                }
            }
        }
    }
}


.pxl-swiper-on-hover {
    .pxl-swiper-arrows { 
        .pxl-swiper-arrow {
            opacity: 0;
            &.pxl-swiper-arrow-prev {
                transform: translateX(-50px);
            }
            &.pxl-swiper-arrow-next {
                transform: translateX(50px);
            }
        }
    }
    &:hover {
        .pxl-swiper-arrows { 
            .pxl-swiper-arrow {
                opacity: 1;
                transform: translateX(0)
            }
        }
    }
}

.pxl-swiper-arrows {
    .pxl-swiper-arrow { 
        @extend .pxl-transition-linear;
        cursor: pointer;
        svg path, i {
            transition: inherit;
        }
    }
    &.pxl-swiper-arrows1 {
        width: 100%;
        position: absolute;
        bottom: 50%;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        z-index: 9;
        pointer-events: none;
        .pxl-swiper-arrow {
            @extend .pxl-dflex-center;
            @extend .pxl-square-box;
            --size: 60px;
            border: 1px solid var(--boarder-grey-1);
            background-color: #FFF;
            pointer-events: visible;
            &:hover {
                background-color: var(--dark-blue-1);
                border-color: var(--dark-blue-1);
                svg path {
                    fill: #FFF;
                }
            }
        }
    }
}

.pxl-swiper-dots {
    &.pxl-swiper-pagination-bullets {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        &.pxl-swiper-dots1 {
            padding-top: 59px;
            .pxl-swiper-pagination-bullet {
                cursor: pointer;
                position: relative;
                @extend .pxl-dflex-center;
                --size: 30px;
                width: var(--size);
                min-width: var(--size);
                height: var(--size);
                border-radius: 50%;
                background-color: transparent;
                @extend .pxl-transition-linear;
                &::before {
                    content: '';
                    @extend .pxl-pabsolute-center;
                    border-radius: inherit;
                    border: 1px solid var(--primary-color);
                    opacity: 0;
                    transition: inherit
                }     
                span {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 6px;
                    height: 6px;
                    border-radius: inherit;
                    background-color: #FFF;
                    transition: inherit;
                }    
                &:hover , &.swiper-pagination-bullet-active {
                    background-color: transparent;
                    &::before {
                        opacity: 1;
                    }
                    span {
                        background-color: var(--primary-color);
                    }
                }       
            }
        }
    }


    &.pxl-swiper-pagination-progressbar {
        height: 1px;
        background-color: #454545;
        width: 100%;
        position: relative;
        margin-top: 45px;
        .swiper-pagination-progressbar-fill {
            height: 3px;
            background-color: $primary_color;
            display: inline-flex;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            transform-origin: left top;
        }
    }

}