/**
**For genereal Swipter styles  
**that can be use for every or atleast 2 swiper instances
**selector should be as simple as possible so it can be overidden
**in an specific element file (ex. /woocommerce/wc-image-swiper.css)
*/
.uagb-slider-container,
.swiper {
    --transform-duration: 0.5s;
}

/**navigation*/
.swiper-button-prev,
.swiper-button-next {
    transition: all var(--transform-duration) cubic-bezier(.46, .03, .52, .96) 0s;
    height: auto !important;
    width: auto !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

.swiper-button-prev {
    left: 0 !important;
}

.swiper-button-next {
    right: 0 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

.swiper-button-prev::before,
.swiper-button-next::before {
    content: '';
    display: block;
    --my-size: 2.2rem;
    height: var(--my-size);
    width: calc(var(--my-size) / 2.116428);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.swiper-button-prev::before {

    background-image: url('../img/arrow-slider-left');
}

.swiper-button-next::before {

    background-image: url('../img/arrow-slider-right');
}