.animate {
  &.fadein {
    animation: fadein 500ms;
  }
}

.fade-enter-active {
  animation: fadein 500ms;
}

.fade-leave-active {
  animation: fadein 500ms reverse;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes onlineblink {
  0% {
    @apply .bg-green;
  }
  100% {
    @apply .bg-green-dark;
  }
}

@keyframes offlineblink {
  0% {
    @apply .bg-red;
  }
  100% {
    @apply .bg-red-dark;
  }
}

/*
 * transition="modal"
 */
.modal-enter, .modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  animation: opacity 250ms linear;
}