.swiper-controls
{
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;

    gap: var(--inner_gap);


    .swiper-button-next,
    .swiper-button-prev
    {
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        margin: 0;

        transform: none;

        border-radius: 0;
        background: none;

        --swiper-navigation-size: 28px;


        .icon
        {
            width: 100%;
            height: auto;

            aspect-ratio: 1 / 1;
        }
    }


    .swiper-button-prev
    {
        .icon
        {
            transform: none;
        }
    }

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


    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction
    {
        position: relative;

        width: auto;
    }
}


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

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

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


    &:after
    {
        display: none;
    }


    .icon
    {
        display: block;

        width: 12px;
        height: 8px;
    }


    &:hover
    {
        --swiper-navigation-color: var(--primary_color);
    }
}


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



.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet
{
    margin: 0;
}



.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction
{
    position: absolute;
    bottom: 0;
    left: 0;

    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;

    width: 100%;
    height: 8px;

    pointer-events: none;

    gap: var(--inner_gap_xs);
}


.swiper-pagination-bullet
{
    display: block;

    width: 8px;
    height: 8px;

    transition: .2s linear;
    pointer-events: auto;

    opacity: 1;
    border-radius: var(--border_radius_max);
    background: #ebebeb;


    &:hover,
    &.active
    {
        background: var(--secondary_color);
    }
}


.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet
{
    margin: 0;
}