@import '../../sass/_custom-variables/libs';
@import '~swiper/swiper';
@import '~swiper/components/a11y/a11y';
@import '~swiper/components/controller/controller';
@import '~swiper/components/effect-coverflow/effect-coverflow';
@import '~swiper/components/effect-cube/effect-cube';
@import '~swiper/components/effect-fade/effect-fade';
@import '~swiper/components/effect-flip/effect-flip';
@import '~swiper/components/lazy/lazy';
@import '~swiper/components/navigation/navigation';
@import '~swiper/components/pagination/pagination';
@import '~swiper/components/scrollbar/scrollbar';
@import '~swiper/components/thumbs/thumbs';
@import '~swiper/components/zoom/zoom';

.swiper-container {
  overflow: hidden !important;
  width: 100%;

  .swiper-pagination-bullet.swiper-pagination-bullet-active.bg-transparent {
    background: transparent !important;
  }

  @include feature-rtl {
    .swiper-button-next {
      right: auto;
      left: 10px;
    }

    .swiper-button-prev {
      right: 10px;
      left: auto;
    }
  }

  @include feature-rtl {
    &.swiper-container-vertical {
      > .swiper-pagination-bullets {
        right: auto;
        left: 10px;
      }

      > .swiper-pagination-progressbar {
        right: 0;
        left: auto;
      }

      > .swiper-scrollbar {
        right: auto;
        left: 3px;
      }
    }
  }
}

.swiper-button-prev,
.swiper-button-next {
  outline: 0 !important;

  &::after {
    display: none !important;
  }
}

.swiper-button-prev,
.swiper-button-next {
  display: flex;
  align-items: center;
  justify-content: center;

  &.custom-icon {
    background-image: none;
    font-size: 2rem;
    line-height: 1;

    @include feature-rtl {
      transform: scaleX(-1);
    }
  }

  &.swiper-button-white {
    color: #fff;
  }
}

.swiper-pagination-bullet {
  background: rgba(0, 0, 0, .7);
}

.swiper-pagination-progressbar,
.swiper-scrollbar {
  background: rgba(0, 0, 0, .08);
}

.swiper-scrollbar-drag {
  background: rgba(0, 0, 0, .3);
}

.swiper-pagination-white {
  .swiper-pagination-bullet {
    background: #fff !important;
  }

  .swiper-pagination-bullet-active {
    background: #fff !important;
  }
}

.swiper-scrollbar-white {
  background: rgba(255, 255, 255, .2) !important;

  .swiper-scrollbar-drag {
    background: #fff !important;
  }
}