Connected.Components/Styles/components/_carousel.scss

@import '../abstracts/variables';

.carousel {
    display: flex !important;
    position: relative;
    margin: 0px !important;
    clip-path: inset(0px 0px 0px 0px);
    overflow: hidden;

    @each $color in $palette-colors {
        &.carousel-#{$color} {
            color: var(--palette-#{$color}-text);
        }
    }
}

.carousel-elements-rtl {
    transform: rotate(180deg) !important;
}

.carousel-item {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: inherit;
    padding: inherit;
    z-index: 2;

    @each $color in $palette-colors {
        &.carousel-item-#{$color} {
            color: var(--palette-#{$color}-text);
            background-color: var(--palette-#{$color});
        }
    }
}

.carousel-item-exit {
    z-index: 1;
}

/* ### Transitions ### */

/*Fade
*/ 
@keyframes carousel-transition-fade-in-keyframe {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes carousel-transition-fade-out-keyframe {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.carousel-transition-fade-in {
    animation: 0.5s carousel-transition-fade-in-keyframe
}

.carousel-transition-fade-out {
    animation: 0.5s carousel-transition-fade-out-keyframe;
    animation-fill-mode: forwards;
}

.carousel-transition-none {
    display: none;
}



/*Slide
*/
@keyframes carousel-transition-slide-next-enter-keyframe {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes carousel-transition-slide-next-rtl-enter-keyframe {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes carousel-transition-slide-next-exit-keyframe {
    from {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes carousel-transition-slide-next-rtl-exit-keyframe {
    from {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(100%, 0, 0);
    }
}

.carousel-transition-slide-next-enter {
    animation: 0.5s carousel-transition-slide-next-enter-keyframe
}

.carousel-transition-slide-next-rtl-enter {
    animation: 0.5s carousel-transition-slide-next-rtl-enter-keyframe;
}

.carousel-transition-slide-next-exit {
    animation: 0.5s carousel-transition-slide-next-exit-keyframe;
    animation-fill-mode: forwards;

}

.carousel-transition-slide-next-rtl-exit {
    animation: 0.5s carousel-transition-slide-next-rtl-exit-keyframe;
    animation-fill-mode: forwards;
}



@keyframes carousel-transition-slide-prev-enter-keyframe {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes carousel-transition-slide-prev-rtl-enter-keyframe {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes carousel-transition-slide-prev-exit-keyframe {
    from {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes carousel-transition-slide-prev-rtl-exit-keyframe {
    from {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(-100%, 0, 0);
    }
}

.carousel-transition-slide-prev-enter {
    animation: 0.5s carousel-transition-slide-prev-enter-keyframe
}

.carousel-transition-slide-prev-rtl-enter {
    animation: 0.5s carousel-transition-slide-prev-rtl-enter-keyframe;
}

.carousel-transition-slide-prev-exit {
    animation: 0.5s carousel-transition-slide-prev-exit-keyframe;
    animation-fill-mode: forwards;
}

.carousel-transition-slide-prev-rtl-exit {
    animation: 0.5s carousel-transition-slide-prev-rtl-exit-keyframe;
    animation-fill-mode: forwards;
}