@import '../../../assets/sass/config';
@import '../../../assets/sass/mixins';
@import '../../../assets/sass/direction';

// 4. Pagination
/* Dots */
.elementor-widget-alpus-nested-slider {
    --alpha-slider-dot-bg: var(--alpha-primary-color);
    --alpha-slider-dot-bd: var(--alpha-primary-color);
    --alpha-slider-dot-hover-bg: var(--alpha-primary-color);
    --alpha-slider-dot-hover-bd: var(--alpha-primary-color);
    --alpha-slider-dot-active-bg: transparent;
    --alpha-slider-dot-active-bd: var(--alpha-primary-color);
    --alpha-slide-transition-speed: 0ms;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9rem;
    border: 2px solid;
    background: var(--alpha-slider-dot-bg);
    color: var(--alpha-slider-dot-bd);
    opacity: 0.4;
    transition: 0.3s;

    .swiper-pagination-clickable & {
        cursor: pointer;
    }

    &:first-child:last-child {
        display: none;
    }

    &:not(.swiper-pagination-bullet-active):hover {
        background: var(--alpha-slider-dot-hover-bg);
        color: var(--alpha-slider-dot-hover-bd);
    }
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--alpha-slider-dot-active-bg);
    color: var(--alpha-slider-dot-active-bd);
}

.elementor-pagination-skin-default {
    .swiper-pagination-bullet {
        &:not(.swiper-pagination-bullet-active):hover {
            opacity: 0.8;
        }
    }
}

.elementor-swiper-button svg {
    transition: inherit;
}

.elementor-pagination-skin-white {
    --alpha-slider-dot-bg: var(--alpha-white-color);
    --alpha-slider-dot-bd: var(--alpha-white-color);
    --alpha-slider-dot-hover-bg: var(--alpha-white-color);
    --alpha-slider-dot-hover-bd: var(--alpha-white-color);
    --alpha-slider-dot-active-bd: var(--alpha-white-color);

    .swiper-pagination-bullet {
        opacity: 0.8;

        &:not(.swiper-pagination-bullet-active):hover {
            opacity: 1;
        }

        &.swiper-pagination-bullet-active {
            opacity: 1;
        }
    }
}

.elementor-pagination-skin-grey {
    --alpha-slider-dot-bg: #efefef;
    --alpha-slider-dot-bd: #efefef;
    --alpha-slider-dot-hover-bg: var(--alpha-grey-color);
    --alpha-slider-dot-hover-bd: var(--alpha-grey-color);
    --alpha-slider-dot-active-bd: var(--alpha-grey-color);
}

.elementor-pagination-skin-dark {
    --alpha-slider-dot-bg: #a1a1a1;
    --alpha-slider-dot-bd: #a1a1a1;
    --alpha-slider-dot-hover-bg: var(--alpha-dark-color);
    --alpha-slider-dot-hover-bd: var(--alpha-dark-color);
    --alpha-slider-dot-active-bd: var(--alpha-dark-color);
}

.elementor-pagination-type-inner_circle {
    --alpha-slider-dot-bg: transparent;
    --alpha-slider-dot-hover-bg: transparent;
    --alpha-slider-dot-active-bg: transparent;

    .swiper-pagination-bullet {
        position: relative;
        border: 1px solid;

        &:before {
            content: '';
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background-color: var(--alpha-slider-dot-bd);
            transform: scale(0);
            transition: .1s;
        }

        &:not(.swiper-pagination-bullet-active):hover:before {
            background-color: var(--alpha-slider-dot-hover-bd);
            transform: scale(0.4);
        }

        &.swiper-pagination-bullet-active:before {
            background-color: var(--alpha-slider-dot-active-bd);
            transform: scale(0.4);
        }
    }
}

.elementor-pagination-type-active_circle {
    --alpha-slider-dot-bg: transparent;
    --alpha-slider-dot-hover-bg: transparent;
    --alpha-slider-dot-active-bg: transparent;

    .swiper-pagination-bullet {
        position: relative;
        border: none;
        opacity: 1;

        circle {
            stroke: var(--alpha-slider-dot-active-bd);
            stroke-width: 4px;
            stroke-linecap: round;
            stroke-dasharray: 214, 400;
        }

        svg {
            position: absolute;
            left: 0;
            top: 0;
            pointer-events: none;
            width: 100%;
            height: 100%;
        }

        circle {
            stroke-dashoffset: 180;
            stroke-dasharray: 179;
        }

        &:before {
            content: '';
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background-color: var(--alpha-slider-dot-bd);
            transform: scale(0.3);
            transition: background-color .3s;
        }

        &:not(.swiper-pagination-bullet-active):hover:before {
            background-color: var(--alpha-slider-dot-hover-bd);
        }

        &.swiper-pagination-bullet-active {
            &:before {
                background-color: var(--alpha-slider-dot-active-bd);
            }

            circle {
                stroke-dashoffset: 5;
                transform: rotate(-81deg);
                transform-origin: center;
                transition: stroke-dashoffset var(--alpha-slide-transition-speed) cubic-bezier(.25, .25, .1, 1), stroke .2s ease;
            }
        }
    }
}

.swiper-pagination {
    position: absolute;
    left: 50%;
    transition: 0.3s opacity;
    transform: translate3d(-50%, 0, 0);
    bottom: -1.5rem;
    line-height: 0;
    z-index: 10;

    .elementor-swiper .elementor-slides-wrapper &,
    .elementor-swiper .elementor-slides-wrapper.swiper-horizontal>&,
    .elementor-swiper .elementor-slides-wrapper &.swiper-pagination-horizontal {
        left: 50%;
    }

    .elementor-pagination-position-inside & {
        bottom: 2rem;
    }

    .elementor-pagination-position-outside & {
        bottom: -4rem;
    }

    &.swiper-pagination-hidden {
        opacity: 0;
    }
}

.elementor .swiper-wrapper {
    flex-wrap: nowrap;
}

// 5. Disable Mobile Slider
@include mq(xl, max) {
    .touchable .alpha-disable-mobile-slider *:not(.swiper)>.swiper-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
            height: 7px;
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            margin-#{$right}: 2px;
            background: rgba(#000, 0);
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

        &:hover::-webkit-scrollbar-thumb {
            background: rgba(#000, 0.25);
        }
    }
}

// 6. Animation Slider
.elementor-swiper {
    .slide-animate {
        transform: translate3d(0, 0, 0) scale(1);
        visibility: hidden;
        opacity: 0;

        &.show-content,
        &.animated,
        &.appear-animation-visible {
            visibility: visible;
            opacity: 1;
        }
    }
}

// 9. Slider Shadow
.elementor-swiper .swiper-shadow {
    margin: -20px;
    padding: 20px;
    width: calc(100% + 40px) !important;
    height: auto;
}

/* Focus on active slide style */
.swiper-container,
.swiper {

    &.swiper-zoom-in-active-slide,
    &.swiper-active-slide-opacity {
        .swiper-slide {
            transition: transform .3s, opacity .3s;
        }
    }

    &.swiper-zoom-in-active-slide .swiper-slide-active {
        z-index: 1;
    }

    &.swiper-active-slide-opacity .swiper-slide.swiper-slide-active {
        opacity: 1;
    }
}

.swiper-scale-shrink {
    .swiper-slide {
        transition: transform .45s;
    }

    .swiper-dragging.swiper-wrapper .swiper-slide {
        transform: scale(0.95);
    }
}

@media (min-width: 992px) {

    .hide-nav-desktop .elementor-swiper-button,
    .hide-dots-desktop .swiper-pagination {
        display: none !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {

    .hide-nav-tablet .elementor-swiper-button,
    .hide-dots-tablet .swiper-pagination {
        display: none !important;
    }
}

@media (max-width: 767px) {

    .hide-nav-mobile .elementor-swiper-button,
    .hide-dots-mobile .swiper-pagination {
        display: none !important;
    }
}