.mol-step-slider {
    .pagination {
        @apply flex justify-between items-center mt-8 gap-4;

        * {
            @apply transition;
        }

        .swiper-pagination {
            @apply relative w-auto;

            &-bullet {
                @apply bg-secondary-col-2 bg-opacity-50 rounded-full transition-all duration-300 p-1 mx-1 cursor-pointer;

                &-active {
                    @apply bg-opacity-100 w-4;
                }
            }
        }

        .swiper-prev,
        .swiper-next {
            @apply focus:ring-2 cursor-pointer text-black bg-gray-100 h-11 w-11 rounded-full hidden sm:inline-flex justify-center items-center;

            > * {
                @apply pointer-events-none;
            }

            &.swiper-button-disabled {
                @apply opacity-50;

                &:hover {
                    .atm-icon {
                        transform: translateX(0px);
                    }
                }
            }

            &.hide-prevnext {
                @apply hidden;
            }
        }

        .swiper-prev {
            @apply mr-4;

            &:hover {
                .atm-icon {
                    transform: translateX(-2px);
                }
            }
        }

        .swiper-next:hover {
            .atm-icon {
                transform: translateX(2px);
            }
        }
    }

    .swiper-container {
        @apply overflow-visible;
        clip-path: polygon(0 0, 200% 0, 200% 100%, 0% 100%);

        @media (max-width: 768px) {
            padding-right: calc(100vw - 640px + 32px);
        }

        @media (max-width: 640px) {
            padding-right: 32px;
        }
    }

    .swiper-slide {
        @media (max-width: 768px) {
            transform: translateX(calc(100vw / 2 - 640px / 2 + 16px));
        }

        @media (max-width: 640px) {
            transform: translateX(16px);
        }
    }

    .swiper-wrapper {
        @apply pb-6 pr-8;
    }
}