.dark-mode {
    .adm-reference-slider {
        --e-global-color-primary: #35425b;
    }
}

.adm-reference-slider {
    --e-global-color-primary: #fff;

    .swiper {
        position: relative;
        overflow: visible;

        &:before {
            content: "";
            width: 50%;
            height: 100%;
            background: var(--e-global-color-primary);
            z-index: 999;
            position: absolute;
            left: -50%;
        }

        .swiper-slide {
            margin-bottom: 60px;
            height: auto;
            align-self: stretch;

            img,
            video {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }

        .swiper-pagination {
            text-align: start;
            z-index: 9999;

            .swiper-pagination-bullet {
                background: var(--e-global-color-text);
                opacity: 1 !important;
                margin-right: 20px !important;
            }

            .swiper-pagination-bullet-active {
                background: var(--e-global-color-text);
                opacity: 1;

                &:after {
                    display: block;
                    content: "";
                    width: 26px;
                    height: 26px;
                    border-radius: 30px;
                    border: 1px solid var(--e-global-color-text);
                    transform: translate(-10px, -10px);
                }
            }
        }

        .swiper-arrows {
            position: absolute;
            top: -15%;
            right: 50px;

            .swiper-button-prev {
                left: -50px !important;
                right: 0 !important;
            }

            .swiper-button-next {
                left: 10px;
                right: unset;
            }
        }
    }
}

.dark-mode {
    .swiper-arrows {
        .swiper-button-prev,
        .swiper-button-next {
            color: #fff !important;

            &:after {
                color: #fff !important;
            }
        }
    }
}

@media (max-width: 768px) {
    .adm-reference-slider {
        .swiper {
            .swiper-arrows {
                .swiper-button-prev,
                .swiper-button-next {
                    &:after {
                        font-size: 30px !important;
                    }
                }

                .swiper-button-prev {
                    left: -40px !important;
                }
            }
        }
    }
}