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

@keyframes slides_right_to_left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes slides_left_to_right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slider-wrapper {
    --animation-duration: 30;
    --blur_effect_color: #fff;

    @include d-flex();
    width: 100%;
    overflow-x: hidden;

    .slider-items {
        @include d-flex();
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto;
        align-items: center;
    }

    .slider-item {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto;
        margin-right: 20px;
    }

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

    &.slide-transition-right-to-left {
        .slider-items {
            animation: calc(var(--animation-duration) * 1s) slides_right_to_left
                infinite linear;
        }
    }
    &.slide-transition-left-to-right {
        .slider-items {
            animation: calc(var(--animation-duration) * 1s) slides_left_to_right
                infinite linear;
        }
    }

    &:hover {
        .slider-items {
            animation-play-state: paused;
        }
    }

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

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

        &:after {
            right: 0;
            background: linear-gradient(
                to right,
                transparent,
                var(--blur_effect_color)
            );
        }
    }
}
@media (max-width: 767px) {
    .slider-wrapper {
        &.slide-blur-effect {
            &:before,
            &:after {
                width: 100px;
            }
        }
    }
}