// Swiper Stuff
/* stylelint-disable */

.swiper-pagination {
  bottom: 0;
}

.swiper-pagination-bullet {
  background-color: co('black', '20');
  width: 8px;
  height: 8px;
  border-radius: 10px;
}

.swiper-pagination-bullet-active {
  background-color: co('black', '90');
}

.swiper-button-prev,
.swiper-button-next {
  background: rgba(co('white'), 0.1);
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 32px;
  transform: translateY(-50%);
  transition: all 0.25s ease('out-cubic');

  .a-svgIcon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    width: 32px;
    height: 32px;
  }

  svg path {
    fill: rgba(co('black', '70'), 0.5);
    transition: fill 0.25s ease('out-cubic');
  }

  &:hover {
    background: rgba(co('white'), 0.2);

    svg path {
      fill: rgba(co('black', '70'), 0.8);
    }
  }
}

.swiper-button-prev {
  @include flu(sp(2), sp(4), left);
}

.swiper-button-next {
  @include flu(sp(2), sp(4), right);
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
/* stylelint-enable */