/* Loading */

.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: #2fa4f5;
  display: none;
  height: 3px;
  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;
}