/*  페이지네이션 버튼 - 모바일 퍼스트 */
@layer components {
  .splide-pagination-bullets {
    @apply w-full flex justify-center items-center gap-3 mt-6 z-[5] md:mt-8 md:gap-6;
  }

  .splide-pagination-bullets.type-full {
    @apply absolute bottom-8 left-0;
  }

  .splide-pagination-bullet {
    @apply relative w-2 h-2 rounded-full bg-[var(--primary)] opacity-100 md:w-3 md:h-3
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-[rgba(0,0,0,0.5)] after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
  }

  .splide-pagination-bullet.is-active {
    @apply after:opacity-100;
  }
  .splide-arrow {
    @apply hidden absolute top-1/2 w-[48px] h-[48px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5] md:block
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
    hover:after:opacity-10;
  }
  .arrow-prev {
    @apply bg-[image:var(--arrow-left)];
  }
  .arrow-next {
    @apply bg-[image:var(--arrow-right)];
  }

  .type-full .arrow-prev {
    @apply left-10;
  }

  .type-full .arrow-next {
    @apply right-10;
  }

  .splide-arrow svg {
    @apply hidden;
  }
}