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


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

        margin: 0;

        transform: none;

        --swiper-navigation-sides-offset: 0;
    }
}


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

    --swiper-navigation-color: var(--light_color);
    --swiper-navigation-size: 54px;
    --swiper-navigation-sides-offset: var(--inner_gap_xs);


    .block.bg_dark &
    {
        &:before
        {
            background: rgba(255, 255, 255, .10);
        }


        @media (hover: hover) and (pointer: fine)
        {
            &:hover
            {
                &:before
                {
                    background: var(--primary_color);
                }
            }
        }
    }


    &:before
    {
        position: absolute;
        inset: 0;

        display: block;

        content: '';
        transition: transform .2s linear;

        background: var(--primary_color);
    }


    .icon
    {
        position: relative;
        z-index: 2;

        display: block;

        width: 11px;
        height: auto;

        aspect-ratio: 1 / 1;
    }



    @media (hover: hover) and (pointer: fine)
    {
        &:hover
        {
            &:before
            {
                transform: scale(1.1);
            }
        }
    }
}


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


.swiper-pagination
{
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--inner_gap);

    pointer-events: none;

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


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

        opacity: .2;

        --swiper-pagination-bullet-height: 2px;
        --swiper-pagination-bullet-width: 50px;
        --swiper-pagination-bullet-inactive-opacity: 1;
        --swiper-pagination-bullet-border-radius: 0;
        --swiper-pagination-bullet-horizontal-gap: 0;


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

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