/* Loading */
.senna-loading-bar {
    background: #15d880;
    background: rgba(255, 255, 255, 0.5);
}

.senna-loading .senna-loading-bar {
    animation: shift-rightwards 1s ease-in-out infinite;
    animation-delay: .4s;
    display: block;
}

.senna-loading-bar {
    transform: translateX(100%);
    background: #15d880;
    display: none;
    height: 2px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}

@keyframes shift-rightwards {
    0% {
        transform: translateX(-100%);
    }

    40%,
    60% {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/* Transition */
[class^="senna-transition-"] .flipped {
    animation-duration: 0.40s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.senna-transition-fade .flipped {
    animation-name: fadeIn;
}