:root {
  --swiper-pagination-bullet-border-radius: 0;
  --swiper-pagination-bullet-height: 2px;
  --swiper-pagination-bullet-width: 100%;
  --swiper-pagination-bullet-horizontal-gap: 0px;
  --swiper-theme-color: var(--wp--preset--color--primary) !important;
  --swiper-pagination-color: transparent !important;
  --swiper-pagination-bullet-inactive-color: transparent !important;
}

.swiper-pagination {
  @apply h-fit flex gap-4 lg:gap-8 2xl:gap-12 !static;
  top: unset !important;
  bottom: 0px !important;
  z-index: 100 !important;
}

.swiper-pagination-bullet {
  @apply bg-transparent w-full !py-6 relative;

  &:after {
    @apply content-[''] bg-primary w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
    height: 2px;
  }
}
.swiper-pagination-fraction {
  @apply !text-primary font-semibold;
}

.swiper-controls {
  @apply flex justify-start gap-6 pt-6 pb-10 static overflow-visible;
  .swiper-button-next,
  .swiper-button-prev {
    @apply static block border border-primary p-12  rounded-full transition-all duration-300;
    &:after {
      @apply left-1/2 top-1/2 block  w-fit;

      transform: translate(-50%, -50%);
    }
    &:hover {
      @apply scale-105;
    }
  }
  .swiper-button-prev:has(svg),
  .swiper-button-next:has(svg) {
    @apply p-0 border-none w-24 h-24;
    &:after {
      @apply hidden;
    }
  }
}
.swiper-wrapper {
  @apply mb-4 block lg:flex;
}