@keyframes mx-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mx-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


.mx-fade{
  &-enter-active{
    animation: mx-fade-in $duration $time-function both;
  }

  &-leave-active{
    animation: mx-fade-out $duration $time-function both;
  }
}