/*  페이지네이션 버튼 - 모바일 퍼스트 */
@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 opacity-100 md:w-3 md:h-3 transition-all duration-200 ease-in-out;
    background-color: var(--pagination-disabled);
  }

  .splide-pagination-bullet:hover,
  .splide-pagination-bullet.is-active {
    background-color: var(--pagination-active);
  }

  .splide__arrows {
    @apply hidden md:block;
  }
  .splide__arrows .splide-arrow.btn-circle {
    @apply absolute top-1/2 w-[40px] h-[40px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5]
    md:w-[48px] md:h-[48px];
  }
  .splide__arrow--prev {
    @apply bg-[image:var(--arrow-prev)];
  }
  .splide__arrow--next {
    @apply bg-[image:var(--arrow-next)];
  }

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

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

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