// Animations

// slide-fade
.slide-fade-enter-active {
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.slide-fade-leave-active {
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

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

// Infobar
.infobar-enter-active {
  animation: slideOutRight .2s reverse;
}

.infobar-leave-active {
  animation: slideOutRight .2s;
}

html[dir=rtl] .infobar-enter-active {
  animation: slideOutLeft .2s reverse;
}

html[dir=rtl] .infobar-leave-active {
  animation: slideOutLeft .2s;
}

// Slide out right animation
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

// Bounce in animation
.fade-in-enter-active {
  animation: fadeIn .2s;
}

.fade-in-leave-active {
  animation: fadeIn .2s reverse;
}

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