.swiper-pagination.hide-mobile {
    display: none;
}

/* Colors */
.swiper-pagination .swiper-pagination-bullet {
    background-color: white;
}

.dark .swiper-pagination .swiper-pagination-bullet {
    background-color: #242424 !important;
}

.swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet {
    box-shadow: 2px 0 #242424;
}

.dark .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet {
    box-shadow: 2px 0 white;
}
/* END of Colors */

/* Horizontal Pagination */
.swiper-horizontal .swiper-pagination-horizontal {
    width: unset;
    bottom: 30px;
    left: unset;
    right: 16px;
}

    .swiper-horizontal .swiper-pagination-horizontal .swiper-pagination-bullet {
        width: 2px;
        height: 10px;
        margin: 0 !important;
        margin-right: 10px !important;
        border-radius: unset !important;
    }

    .swiper-horizontal .swiper-pagination-horizontal .swiper-pagination-bullet-active {
        height: 15px;
        width: 2px;
        opacity: 1 !important;
    }
/* END of Horizontal Pagination */

/* Vertical Pagination */
.swiper-vertical .swiper-pagination-vertical {
    /* TODO */
}
/* END of Vertical Pagination */

/* Animation */
.swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet {
    animation: wave-horizontal-bullet 3s infinite alternate cubic-bezier(0.4, 0, 1, 1);
}

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(2) {
        animation-delay: 0.2s;
    }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(3) {
        animation-delay: 0.4s;
    }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(4) {
        animation-delay: 0.6s;
    }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(5) {
        animation-delay: 0.8s;
    }
/* END of Animation */

@media (min-width: 992px) {
    .swiper-pagination.hide-mobile {
        display: initial;
    }

    /* Colors */
    .swiper-pagination .swiper-pagination-bullet {
        background-color: transparent !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

        .swiper-pagination .swiper-pagination-bullet::after {
            background-color: white;
            opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
        }

    .swiper-pagination .swiper-pagination-bullet-active::after {
        opacity: 1 !important;
    }

    .dark .swiper-pagination .swiper-pagination-bullet {
        background-color: transparent !important;
        box-shadow: none !important;
    }

        .dark .swiper-pagination .swiper-pagination-bullet::after {
            background-color: #242424;
        }

    .swiper-pagination.swiper-pagination-vertical .swiper-pagination-bullet::after {
        box-shadow: 0 2px #242424;
    }

    .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet::after {
        box-shadow: 2px 0 #242424;
    }

    .dark .swiper-pagination.swiper-pagination-vertical .swiper-pagination-bullet::after {
        box-shadow: 0 2px white;
    }

    .dark .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet::after {
        box-shadow: 2px 0 white;
    }
    /* END of Colors */

    /* Horizontal Pagination */
    .swiper-horizontal .swiper-pagination-horizontal {
        width: unset;
        bottom: unset;
        left: unset;
        right: 23px;
        top: -39px;
    }

        .swiper-horizontal .swiper-pagination-horizontal .swiper-pagination-bullet {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 10px;
            height: 10px;
            margin: 0 !important;
            margin-right: 2px !important;
            border-radius: unset !important;
        }

            .swiper-horizontal .swiper-pagination-horizontal .swiper-pagination-bullet::after {
                content: '';
                display: block;
                min-width: 2px;
                min-height: 10px;
            }

        .swiper-horizontal .swiper-pagination-horizontal .swiper-pagination-bullet-active {
            height: 15px;
            width: 10px;
        }

            .swiper-horizontal .swiper-pagination-horizontal .swiper-pagination-bullet-active::after {
                min-height: 15px !important;
            }
    /* END of Horizontal Pagination */

    /* Vertical Pagination */
    .swiper-vertical .swiper-pagination-vertical {
        width: 15px;
        top: unset;
        bottom: 30px;
        right: 16px;
        left: unset;
    }

        .swiper-vertical .swiper-pagination-vertical .swiper-pagination-bullet {
            display: flex !important;
            align-items: center;
            justify-content: flex-end;
            width: 15px;
            height: 10px;
            margin: 0 !important;
            margin-bottom: 2px !important;
        }

            .swiper-vertical .swiper-pagination-vertical .swiper-pagination-bullet::after {
                content: '';
                display: block;
                min-width: 10px;
                min-height: 2px;
            }

        .swiper-vertical .swiper-pagination-vertical .swiper-pagination-bullet-active {
            height: 10px;
            width: 15px;
        }

            .swiper-vertical .swiper-pagination-vertical .swiper-pagination-bullet-active::after {
                min-width: 15px !important;
            }
        /* END of Vertical Pagination */

        /* Animation */
        .swiper-vertical .swiper-pagination-vertical.animate .swiper-pagination-bullet::after {
            animation: wave-vertical-bullet 3s infinite alternate cubic-bezier(0.4, 0, 1, 1);
        }

        .swiper-vertical .swiper-pagination-vertical.animate .swiper-pagination-bullet:nth-child(2)::after {
            animation-delay: 0.2s;
        }

        .swiper-vertical .swiper-pagination-vertical.animate .swiper-pagination-bullet:nth-child(3)::after {
            animation-delay: 0.4s;
        }

        .swiper-vertical .swiper-pagination-vertical.animate .swiper-pagination-bullet:nth-child(4)::after {
            animation-delay: 0.6s;
        }

        .swiper-vertical .swiper-pagination-vertical.animate .swiper-pagination-bullet:nth-child(5)::after {
            animation-delay: 0.8s;
        }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet::after {
        animation: wave-horizontal-bullet 3s infinite alternate cubic-bezier(0.4, 0, 1, 1);
    }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(2)::after {
        animation-delay: 0.2s;
    }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(3)::after {
        animation-delay: 0.4s;
    }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(4)::after {
        animation-delay: 0.6s;
    }

    .swiper-horizontal .swiper-pagination-horizontal.animate .swiper-pagination-bullet:nth-child(5)::after {
        animation-delay: 0.8s;
    }

    /* END of Animation */
}

@keyframes wave-vertical-bullet {
    0%, 80% {
        min-width: 10px;
        opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
    }

    100% {
        min-width: 15px;
        opacity: 1;
    }
}

@keyframes wave-horizontal-bullet {
    0%, 80% {
        min-height: 10px;
        opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
    }

    100% {
        min-height: 15px;
        opacity: 1;
    }
}