.image-slider-pilotin {
    .splide-image-slider-pilotin {
        .splide__slide {
            @apply cursor-pointer;
        }
    }
    .custom__pagination {
        transform: translateX(-50%);
        @apply flex absolute w-1/2 left-1/2 mt-10 overflow-hidden;

        li {
            @apply w-full bg-transparent flex items-end border-b-2 border-opacity-50 border-primary overflow-hidden;

            button {
                @apply rounded-sm h-2 m-0 opacity-100 bg-transparent w-full;
                &.is-active {
                    &::before {
                        @apply w-full;
                    }
                }
            }
        }
    }
}

.drag-indicator {
    z-index: 400;
    left: 15px;
    top: 15px;
    width: 58px;
    height: 58px;
    will-change: transform;
    @apply fixed pointer-events-none;

    &::before {
        @apply bg-primary-500;
        content: "";
        transform: scale(0.2);
        border-radius: 50%;
        transition: transform 0.45s ease, opacity 0.3s ease;
        @apply w-full h-full block absolute left-0 top-0 opacity-0;
    }

    .arrows {
        @apply absolute flex items-center w-full h-full gap-16 opacity-0 justify-center transform transition-all delay-100 duration-300 ease-in-out;

        i {
            @apply text-white;
        }
    }

    &.is-visible {
        &::before {
            @apply opacity-100 transform scale-100;
        }

        .arrows {
            @apply opacity-100 gap-4;
        }
    }
}