.swiper-pagination{
    --swiper-pagination-bullet-border-radius:10px;
    --swiper-pagination-bullet-inactive-color: var(--color);
    --swiper-pagination-color:var(--active-color);
    --swiper-pagination-bullet-width: 6px;
    --swiper-pagination-bullet-height:6px;
    --swiper-pagination-bullet-inactive-opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet{
    transition: all 0.3s linear;
}

.swiper-pagination .swiper-pagination-bullet-active{
    --swiper-pagination-bullet-width: 30px;
}

.swiper-pagination--autoplay .swiper-pagination-bullet-active {
    position: relative;
    overflow: hidden;
    background-color: var(--color);
}

.swiper-pagination--autoplay .swiper-pagination-bullet-active::after {
    position: absolute;
    inset: 0;
    content: "";
    background-color: var(--active-color);
    transform: scaleX(0);
    transform-origin: left center;
    animation: swiper-pagination-progress var(--autoplay-duration) linear forwards;
}

@keyframes swiper-pagination-progress {
    to {
        transform: scaleX(1);
    }
}

.logo-slider-swiper:has(.swiper:hover)
    .swiper-pagination--pause-on-hover
    .swiper-pagination-bullet-active::after {
    animation-play-state: paused;
}

.swiper:has(> .swiper-pagination--pause-on-hover):hover
    > .swiper-pagination--pause-on-hover
    .swiper-pagination-bullet-active::after {
    animation-play-state: paused;
}

@media(max-width:959px){
    .swiper-pagination--autoplay .swiper-pagination-bullet-active::after {
        animation-duration: var(--autoplay-duration-mobile);
    }
}