.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#{$themeColor}'/></svg>");
  left: 10px;
  right: auto;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#{$themeColor}'/></svg>");
  right: 10px;
  left: auto;
}

@each $navColorName, $navColorValue in $colors {
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    &.swiper-button-#{$navColorName} {
      background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#{$navColorValue}'/></svg>");
    }
  }
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    &.swiper-button-#{$navColorName} {
      background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#{$navColorValue}'/></svg>");
    }
  }
}
.swiper-button-lock {
  display: none;
}