.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) {
    @length: length(@colors);
    .looper( 1 );
    .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
      @navPair: extract(@colors, @index);
      @navColorName: extract(@navPair, 1);
      @navColorValue: extract(@navPair, 2);
      @ruleset();
      .looper( @index + 1 );
    }
  }

:root {
    --swiper-navigation-size: 44px;
    /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));

    &.swiper-button-disabled {
        opacity: 0.35;
        cursor: auto;
        pointer-events: none;
    }

    &:after {
        font-family: swiper-icons;
        font-size: var(--swiper-navigation-size);
        text-transform: none !important;
        letter-spacing: 0;
        text-transform: none;
        font-variant: initial;
        line-height: 1;
    }
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    &:after {
        content: 'prev';
    }

    left: 10px;
    right: auto;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    &:after {
        content: 'next';
    }

    right: 10px;
    left: auto;
}

.swiper-button-lock {
    display: none;
}