/* Generic opacity transition */
.transition-opacity {
  transition: opacity 200ms ease-in-out;
}

/* Login component transition */
.login-enter-active,
.login-leave-active {
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

.login-enter,
.login-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.login-enter-active {
  @apply absolute w-full;
  transition-delay: 200ms;
}

/* Generic fade transition */
.fade-enter-active {
  transition: opacity 600ms ease-out;
  transition-delay: 600ms;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-move {
  transition: transform 600ms;
}

/* Rota card transition */
.trimmed-rota-card-enter-active {
  transition: opacity 300ms ease-out;
  transition-delay: 300ms;
}
.trimmed-rota-card-enter {
  opacity: 0;
}
.trimmed-rota-card-enter-to {
  opacity: 1;
}
.trimmed-rota-card-move {
  transition: transform 300ms;
}

/* Loading */
.loading-enter-active,
.loading-leave-active {
  transition: opacity 0.5s;
}
.loading-enter, .loading-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}