.mol-slider-extended {
    overflow: visible;

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

    .pagination {
        @apply flex self-end justify-between lg:justify-center items-center mt-4;

        * {
            @apply transition;
        }

        .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-pagination {
        @apply relative w-auto;

        .swiper-pagination-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;
            }
        }
    }

    @screen lg {
        .pagination {
            @apply justify-between;
        }
    }
}