/* This file is used as dependency in:
   ../../modules/macros/_swiper.html */

/* Swiper Slider Class Overwrites */.swiper--pagination {
    margin-bottom: 50px;
}

:root {
    --swiper-navigation-size: 26px !important;
}

.swiper-button-next,
.swiper-button-prev {
    top: calc(50% - var(--swiper-navigation-size)) !important;
}


.pwr--light .swiper-button-prev,
.pwr--light .swiper-button-next {
    color: var(--clr-base-dk);
}

.pwr--dark .swiper-button-prev,
.pwr--dark .swiper-button-next {
    color: var(--clr-base-lt);
}

@media (min-width: 768px) {
    .swiper-pagination-horizontal.swiper-pagination-below {
        position: relative;
        margin-bottom: 0px;
        margin-top: 60px; /* added 20px because of bottom marked as important */
    }
}

.swiper-pagination-horizontal.swiper-pagination-bullets {
    align-items: center;
    bottom: 0 !important;
    margin-bottom: 20px;
    display: flex;
    height: var(--sl-pag-height,auto);
    justify-content: center;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--sl-pag-bullet-horizontal-gap,5px) !important;
}

.swiper-pagination-bullets.swiper-pagination-below {
    height: 0;
    margin-top: 60px !important;
    position: relative;
}

.swiper-pagination-bullet {
    border-radius: var(--sl-pag-bullet-inactive-border-radius,0) !important;
    height: var(--sl-pag-bullet-inactive-height,var(--sl-pag-bullet-inactive-size,3px)) !important;
    opacity: var(--sl-pag-bullet-inactive-opacity,.2) !important;
    width: var(--sl-pag-bullet-inactive-width,var(--sl-pag-bullet-inactive-size,35px)) !important;
}

.swiper-pagination-bullet-active {
    border-radius: var(--sl-pag-bullet-active-border-radius,0px) !important;
    height: var(--sl-pag-bullet-active-height,var(--sl-pag-bullet-active-size,3px)) !important;
    opacity: 1 !important;
    width: var(--sl-pag-bullet-active-width,var(--sl-pag-bullet-active-size,35px)) !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--clr-btn-primary) !important;
}

.pwr--light .swiper-pagination-bullet {
    background-color: var(--clr-base-dk);
}

.pwr--dark .swiper-pagination-bullet {
    background-color: var(--clr-base-lt);
}

/* POWER specific */

.swiper-buttons-beside .swiper-button-prev,
.swiper-buttons-beside .swiper-button-next {
    cursor: pointer;
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 100;
}

.swiper-buttons-beside .swiper-button-prev {
    left: -30px;
}

.swiper-buttons-beside .swiper-button-next {
    right: -30px;
}

@media (hover: hover) {
    .swiper-slide .pwr-3D-box:hover .pwr-3D-box--shaddow-on-hover {
        box-shadow: initial;
        transform: initial !important;
    }

    .swiper-slide .pwr-3D-box:hover {
        transform: initial;
    }
}

.pwr-slider__pagination {
    transform: translateY(20px);
}

@media (min-width: 1200px) {
    .pwr-slider__navigation .swiper-button-prev {
        left: -40px;
    }

    .pwr-slider__navigation .swiper-button-next {
        right: -40px;
    }

    [class*="pwr-sec--boxed-w-"] .pwr-slider__navigation .swiper-button-prev {
        left: -30px;
    }

    [class*="pwr-sec--boxed-w-"] .pwr-slider__navigation .swiper-button-next {
        right: -30px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .pwr-slider__navigation .swiper-button-prev {
        left: calc(-1 * (var(--sp-p-hor-desktop) - 10px));
    }
    .pwr-slider__navigation .swiper-button-next {
        right: calc(-1 * (var(--sp-p-hor-desktop) - 10px));
    }
}

@media (max-width: 767px) {
    .pwr-slider__navigation .swiper-button-prev {
        left: calc(-1 * (var(--sp-p-hor-mobile) - 10px));
    }
    .pwr-slider__navigation .swiper-button-next {
        right: calc(-1 * (var(--sp-p-hor-mobile) - 10px));
    }
}