$duration: 0.15s;

.components-animation-slide-enter,
.components-animation-slide-appear {
  opacity: 0;
  transform: scale(0.95) translateY(-0.25em);
}

.components-animation-slide-enter-active,
.components-animation-slide-appear-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-property: transform;
  transition-duration: $duration;
  transition-timing-function: ease-out;
}

.components-animation-slide-exit {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.components-animation-slide-exit-active {
  opacity: 0;
  transform: scale(0.95) translateY(-0.25em);
  transition-property: opacity, transform;
  transition-duration: $duration;
  transition-timing-function: ease-out;
}
