.slider-arrows {
  display: flex;
  justify-content: flex-end;

  &--center {
    justify-content: center;
  }

  &--tobottom {
    @include media-breakpoint-down(lg) {
      position: absolute;

      bottom: -2rem;
      left: 50%;

      transform: translateX(-50%);
    }

    @include media-breakpoint-down(md) {
      bottom: -2rem;
    }
  }
}

.slider__arrows-prev,
.slider__arrows-next {
  border: none;
  background: url("/shop/images/slider-arrow.svg") center no-repeat !important;
  width: 28px;
  height: 28px;

  background-color: #F7F7FC !important;
  border-radius: $radius;

  font-size: 0;
  color: transparent;
  cursor: pointer;

  transition: background-color .2s linear;

  &:hover {
    background-color: darken(#F7F7FC, 5%);
  }
}

.slider__arrows-prev {
  margin-right: 4px;
}

.slider__arrows-next {
  transform: rotate(180deg);
}