@import "../settings/_mixins";
@import "../settings/_variables";

@keyframes slides_bottom_to_top {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes slides_top_to_bottom {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.dnetor-infinite-image-vertical {
    --blur_effect_color: #fff;
    --vertical-animation-duration: 15;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 700px;

    .slider-items {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    &.slide-transition-bottom-to-top {
        .slider-items {
            animation: calc(var(--vertical-animation-duration) * 1s)
                slides_bottom_to_top infinite linear;
        }
    }
    &.slide-transition-top-to-bottom {
        .slider-items {
            animation: calc(var(--vertical-animation-duration) * 1s)
                slides_top_to_bottom infinite linear;
        }
    }

    .slider-item {
        margin-bottom: 20px;
    }

    .slider-item-wrap {
        width: 350px;
    }

    .slider-separator-icon {
        @include d-flex();
        font-size: 30px;
        justify-content: center;
        align-items: center;
        svg {
            width: 25px;
        }
    }

    &.slide-blur-effect {
        &:before,
        &:after {
            position: absolute;
            top: left;
            content: "";
            width: 100%;
            height: 125px;
            z-index: 2;
        }

        &:before {
            top: 0;
            background: linear-gradient(
                to top,
                transparent,
                var(--blur_effect_color)
            );
        }

        &:after {
            bottom: 0;
            background: linear-gradient(
                to bottom,
                transparent,
                var(--blur_effect_color)
            );
        }
    }

    &:hover {
        .slider-items {
            animation-play-state: paused;
        }
    }
}
@media (max-width: 767px) {
    .slider-wrapper {
        &.slide-blur-effect {
            &:before,
            &:after {
                height: 75px;
            }
        }
    }
}