/* Grove UI Swiper/Carousel Styles */

:root {
  --swiper-pagination-color: #ffcf83;
  --swiper-pagination-bullet-inactive-color: #D9D9D9;
  --swiper-pagination-bullet-inactive-opacity: 0.6;
  --swiper-navigation-sides-offset: 0;
  --swiper-navigation-size: 30px;
  --swiper-navigation-color: rgb(16, 16, 16);
}

.grove-carousel-wrapper .swiper-button-prev,
.grove-carousel-wrapper .swiper-button-next {
  top: 100px;
  top: calc(50% - 30px);
  bottom: auto;
  z-index: 10;
  margin: 0;
  transform: none;
  width: 36px;
  height: 36px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.grove-carousel-wrapper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px;
}

.grove-carousel-wrapper .swiper-button-prev svg,
.grove-carousel-wrapper .swiper-button-next svg {
  width: auto;
  height: auto;
}

.grove-carousel-wrapper .swiper-button-disabled.swiper-button-prev,
.grove-carousel-wrapper .swiper-button-disabled.swiper-button-next {
  opacity: 0 !important;
}

.grove-carousel-wrapper .swiper-slide > div {
  min-height: 100%;
}

.grove-carousel-wrapper .swiper-autoheight .swiper-wrapper {
  align-items: stretch;
  height: auto !important;
}

.grove-carousel-wrapper .swiper-button-prev {
  left: 12px;
}

.grove-carousel-wrapper .swiper-button-next {
  right: 12px;
  margin-top: 0;
}

.grove-carousel-wrapper .swiper-button-next {
  transform: rotate(0deg) !important;
}

.grove-carousel-wrapper .swiper-button-prev:after,
.grove-carousel-wrapper .swiper-button-next:after {
  content: ''
}

@media all and (min-width: 768px) {
  .grove-carousel-wrapper:hover .swiper-button-prev,
  .grove-carousel-wrapper:hover .swiper-button-next {
    opacity: 1;
  }
}