.bigbear-carousel-wrapper{
    @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);

    padding:10px;
    .bigbear-carousel-viewport{
        @include neufactory-noactive($white,$neu-whiteshadow1,$neu-whiteshadow2);

        border-radius: 10px;
        display: flex;
        overflow: hidden;
        position: relative;
        
    }
    .bigbear-carousel-ul{
        align-items: center;
        display: flex;
        justify-content: center;
        list-style-type: none;
        padding:10px;
        .bigbear-carousel-li{
            @include ringwrapper($white,$neu-whiteshadow1,$neu-whiteshadow2);
            @include square(16px);

            border-radius: 50%;
            cursor: pointer;
            margin:5px;
            position: relative;
            &::after{
                @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
                @include square(10px);

                border-radius: 50%;
                content: '';
                display: block;
                left:3px;
                opacity: 0;
                position: absolute;
                top:3px;
                transform: scale(0);
                transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
            }
            &.carousel-active::after{
                @include neufactory-noactive($primary,$neu-blueshadow1,$neu-blueshadow2);
                @include square(10px);

                border-radius: 50%;
                content: '';
                display: block;
                left:3px;
                opacity: 1;
                position: absolute;
                top:3px;
                transform: scale(1);
                transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
            }
        }
    }
}







.left{
    left:300px;
    transform: translateX(33.333%);
    transition: all 0.5s ease
}

.left.bigbear-carousel-exit-active {
    transform: translateX(33.333%);
    transition: none;
}
.left.bigbear-carousel-enter {
    transform: translateX(33.333%);
    transition: all 0.5s ease;
}
.left.bigbear-carousel-enter-active {
    transform: translateX(33.333%);
    transition: all 0.5s ease;
}
.left.bigbear-carousel-enter-done{
    transform: translateX(0);
    transition: all 0.5s ease;
}


.right{
    transform: translateX(-33.333%);
}

.right.bigbear-carousel-exit-active {
    transform: translateX(-33.333%);
    transition: all 0.5s ease;
}
.right.bigbear-carousel-enter {
    transform: translateX(-33.333%);
    transition: all 0.5s ease;
}
.right.bigbear-carousel-enter-active {
    transform: translateX(0%);
    transition: all 0.5s ease;
}
.right.bigbear-carousel-enter-done{
    transform: translateX(0%);
    transition: all 0.5s ease;
}