$duration-modal: 0.3s;
$move: -400px;
$opacity-modal: 0;

$duration-bg: 0.2s;
$opacity-bg: 0.8;

$easing-enter: ease-out;
$easing-exit: ease-in;

.components-animation-modal {
  will-change: opacity, transform;
  transform: translateZ(0);
}
.components-animation-modal-enter > .modal > .modal-dialog {
  opacity: $opacity-modal;
  transform: translate(0, $move);
}
.components-animation-modal-enter-active > .modal > .modal-dialog {
  opacity: 1;
  transition: transform $duration-modal $easing-enter,
    opacity $duration-modal $easing-enter;
  transform: translate(0, 0);
}
.components-animation-modal-exit > .modal > .modal-dialog {
  opacity: 1;
  transform: translate(0, 0);
}
.components-animation-modal-exit-active > .modal > .modal-dialog {
  opacity: $opacity-modal;
  transform: translate(0, $move);
  transition: transform $duration-modal $easing-enter,
    opacity $duration-modal $easing-enter;
}

.components-animation-backdrop {
  will-change: opacity;
  transform: translateZ(0);
}
.components-animation-backdrop-enter {
  opacity: 0.01;
}
.components-animation-backdrop-enter-active {
  opacity: $opacity-bg;
  transition: opacity $duration-bg $easing-exit;
}
.components-animation-backdrop-enter-done {
  opacity: $opacity-bg;
  transition: opacity $duration-bg $easing-exit;
}
.components-animation-backdrop-exit {
  opacity: $opacity-bg;
}
.components-animation-backdrop-exit-active {
  opacity: 0.01;
  transition: opacity $duration-bg $easing-exit;
}
