.modal--show-animation {
  opacity: 1;
  animation: fadeIn .2s;
}
.modal--hide-animation {
  opacity: 0;
  animation: fadeOut .2s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.modal--show-animation .modal-card {
  opacity: 1;
  z-index: 2;
  animation: fadeSlideIn .2s;
  transform: scale(1);
}
@keyframes fadeSlideIn {
  from {
    transform: scale(0.97) translateY(1rem);
    opacity: 0;
    z-index: -1;
  }
  to {
    transform: scale(1.0) translateY(0);
    opacity: 1;
    z-index: 2;
  }
}

.modal--hide-animation .modal-card {
  z-index:-1;
  opacity:0;
  animation: fadeSlideOut .2s;
  transform: scale(0);
}
@keyframes fadeSlideOut {
  from {
    transform: scale(1.0) translateY(0);
    opacity: 1;
    z-index: 2;
  }
  to {
    transform: scale(0.97) translateY(1rem);
    opacity: 0;
    z-index: -1;
  }
}

.app-env-test {
  .modal--show-animation,
  .modal--hide-animation,
  .modal-card {
    animation-duration: 0s !important;
  }
}