/**
 * Transitions used with Vue <transition name="transition-name">...</transition>
 */

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.slide-transition {
  &-enter-active,
  &-leave-active {
    transition: all 150ms;
  }

  &-enter-from,
  &-leave-to {
    transform: translateY(-70%);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

.fade-transition {
  &-enter-active,
  &-leave-active {
    transition: opacity 150ms ease-out;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
}

.page-transition {
  &-enter-active {
    transition: opacity 300ms ease-out;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
}

.fade-between {
  &-enter-active,
  &-leave-active {
    transition: all 400ms;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
