.swiper-pagination-bullet {
  @apply rounded-full max-w-2 bg-content4 hover:bg-opacity-70 relative cursor-pointer;
}

.swiper-pagination:not(.swiper-pagination-large) .swiper-pagination-bullet {
  @apply max-w-2;
}
/* fraction style */
.swiper-pagination-fraction {
  @apply gap-0;
}

.swiper-pagination-fraction .swiper-pagination-bullet {
  @apply bg-content3-foreground bg-opacity-10 !h-[4px] grow !max-w-12 !w-full hover:bg-opacity-15 relative cursor-pointer rounded-none first:rounded-l last:rounded-r;
}

.swiper-pagination-fraction .swiper-pagination-bullet-active {
  @apply relative;
}

.swiper-pagination-fraction .swiper-pagination-bullet-active::before {
  content: '';
  @apply absolute w-full h-full bg-gradient-to-r from-[#CC93D3] to-[#793BE0] hover:bg-opacity-100 rounded;
}

.swiper-pagination-bullet::after {
  content: '';
  @apply absolute inset-x-0 -inset-y-4;
}

.swiper-pagination-bullet-active {
  @apply bg-primary hover:bg-opacity-100 grow;
}

.swiper-pagination-large .swiper-pagination-bullet {
  @apply max-w-24;
}

.swiper-pagination-primary .swiper-pagination-bullet {
  @apply hover:bg-opacity-60 h-2 w-2;
}

.swiper-pagination-primary .swiper-pagination-bullet-active {
  @apply bg-primary bg-opacity-100 hover:bg-opacity-100;
}

.swiper-pagination-secondary .swiper-pagination-bullet {
  @apply hover:bg-opacity-60 h-2 w-2;
}

.swiper-pagination-secondary .swiper-pagination-bullet-active {
  @apply bg-secondary bg-opacity-100 hover:bg-opacity-100;
}
.swiper-pagination-light .swiper-pagination-bullet {
  @apply hover:bg-opacity-60 h-2 w-2;
}

.swiper-pagination-light .swiper-pagination-bullet-active {
  @apply bg-default-100 bg-opacity-100 hover:bg-opacity-100;
}

.swiper-pagination-dark .swiper-pagination-bullet {
  @apply hover:bg-opacity-60 h-2 w-2;
}

.swiper-pagination-dark .swiper-pagination-bullet-active {
  @apply bg-foreground bg-opacity-100 hover:bg-opacity-100;
}

.swiper-button-disabled {
  @apply opacity-20 !cursor-default;
}

.swiper-pagination.swiper-pagination-lock,
.swiper-button-disabled.swiper-button-lock {
  @apply hidden;
}

.circle-us {
  @apply absolute top-0 left-0 w-full h-full bg-transparent rounded-full;
}
.circle-us:before,
.circle-us:after {
  @apply content-[''] -left-[1px] -top-[1px] border-[#574a6ba5] block absolute w-16 h-16 inset-0 border-[1px] rounded-full;
}

.circle-us:before {
  @apply animate-[ripples_2s_linear_infinite];
}

.circle-us:after {
  @apply animate-[ripples_2s_linear_1s_infinite];
}

/* Ripple animation (still needs to be defined) */
@keyframes ripples {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
