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

.animated-fade-in {
  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-500;
  }
  100% {
    @apply .bg-green-600;
  }
}

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

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

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

/**
 * name="slide-fade" mode="out-in"
 */
.slide-fade-enter-active {
  transition: all 250ms ease;
}

.slide-fade-leave-active {
  transition: all 250ms cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}