.swiper-button-next,
.swiper-button-prev
{
    transition: .2s linear;

    border-radius: 50%;
    background: var(--bg_white);

    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-color: var(--dark_color);
    --swiper-navigation-size: 46px;
    --swiper-navigation-sides-offset: 0;


    .icon
    {
        display: block;

        width: 24px;
        height: 15px;
    }


    &:hover
    {
        background: var(--primary_color);

        --swiper-navigation-color: var(--light_color);
    }
}


.swiper-button-next
{
    .icon
    {
        transform: rotate(180deg);
    }
}


.swiper-pagination
{
    position: relative;

    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;

    margin-top: 5px;

    pointer-events: none;

    --swiper-pagination-bottom: 0;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-pagination-bullet-inactive-color: var(--primary_color);
    --swiper-pagination-bullet-hover-color: var(--primary_color);
    --swiper-pagination-bullet-active-color: var(--primary_color);


    .swiper-pagination-bullet
    {
        transition: background .2s linear;
        pointer-events: auto;

        --swiper-pagination-bullet-height: 5px;
        --swiper-pagination-bullet-width: 100%;
        --swiper-pagination-bullet-inactive-opacity: 1;
        --swiper-pagination-bullet-border-radius: 8px;


        &:hover
        {
            background: var(--swiper-pagination-bullet-hover-color);
        }

        &.active
        {
            background: var(--swiper-pagination-bullet-active-color);
        }
    }
}