.swiper-controls{
    user-select: none;
    -webkit-user-select: none;
    display: contents;
}
.swiper-controls .swiper-button{
    border-radius:6px;
    /* border:1px solid rgb(var(--color-entry-line)); */
    box-shadow: inset 0 0 0 1px rgb(var(--color-entry-line),0.25);
    background-color: rgb(var(--color-button-background));
    color: rgb(var(--color-button-text));
    width:var(--size);
    height:var(--size);
    --swiper-navigation-sides-offset:var(--offset);
    border-radius: 50%;
    overflow: hidden;
    margin-top:0;
}
.swiper-controls .swiper-button svg{
    z-index: 1;
}
.swiper-controls .swiper-button::after{
    content:none;
}
.swiper-controls .swiper-button::before{
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: rgb(var(--color-button-secondary-background));
    transition: all 0.3s;
    z-index: 0;
}
.swiper-controls .swiper-button:hover{
    color: rgb(var(--color-button-secondary-text));
    /* border: 1px solid rgb(var(--color-button-secondary-border)); */
    box-shadow: inset 0 0 0 1px rgb(var(--color-button-secondary-border),0.25);

}

.swiper-controls .swiper-button:not(.swiper-button-disabled):hover::before{
    background-color: rgb(var(--color-button-secondary-background));
    width: 100%;
}

.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled{
    pointer-events: none;
}
  

@media(max-width:768px){
    .swiper-controls .swiper-button{
        width:clamp(30px, 5vw + 10px, 56px);
        height:clamp(30px, 5vw + 10px, 56px);
        --swiper-navigation-sides-offset:var(--mobile-offset);
    }
}