@import 'vars/additional';
$motion-main: cubic-bezier(0.54, 0.02, 0.35, 0.88);


// hover transition class

.hover-transition {
  transition: $transition-time all;
}

// vue transitions

.fade-enter-active,
.fade-leave-active {
  transition: opacity $transition-time;
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

.fade-in {
  &-down-enter-active,
  &-down-leave-active,
  &-up-enter-active,
  &-up-leave-active {
    transition: all $transition-time $motion-main;
  }

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

  &-down-enter,
  &-down-leave-to {
    transform: translateY(-100%);
  }
  &-up-enter,
  &-up-leave-to {
    transform: translateY(100%);
  }
}