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

    border-radius: 50%;
    background: rgba(255, 255, 255, .30);

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


    .icon
    {
        display: block;

        width: 11px;
        height: 8px;
    }


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

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


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



.swiper-controls
{
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--inner_gap_xs);


    .swiper-button-next,
    .swiper-button-prev
    {
        position: relative;
        inset: 0;

        margin: 0;

        transform: none;

        background: rgba(44, 51, 65, .12);

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


        .icon
        {
            width: 28px;
            height: 28px;
        }


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

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


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


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


    .swiper-pagination
    {
        position: relative;

        width: auto;
        margin-right: var(--inner_gap_l);
    }
}


.swiper-pagination
{
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;

    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(--light_color);


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

        border: 3px solid transparent;
        background-clip: padding-box;

        --swiper-pagination-bullet-height: 10px;
        --swiper-pagination-bullet-width: 10px;
        --swiper-pagination-bullet-inactive-opacity: 1;
        --swiper-pagination-bullet-border-radius: 50%;


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


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