// stylelint-disable selector-class-pattern

// ===
// Animate
// ===
.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 0.3s;
}

.fade-enter-to {
  opacity: 1;
}

// ===
// Dialog
// ===
.dialog-enter-active {
  animation: dialog-in 0.3s;
}

.dialog-leave-active {
  animation: dialog-out 0.3s;
}

@keyframes dialog-in {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

// ===
// Fade Left
// ===
.fade-left-enter {
  opacity: 1;
  transform: translateX(100%);
}

.fade-right-enter {
  opacity: 1;
  transform: translateX(-100%);
}

.fade-left-enter-active,
.fade-right-enter-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fade-left-leave-active {
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateX(-100%);
}


.slide-in-enter {
  max-height: 0;
}

.slide-in-enter-to {
  max-height: 100px;
}

.slide-in-enter-active {
  overflow: hidden;
  transition: max-height 0.6s;
}