.page-x-forward-enter-from {
  transform: translateX(5px);
}
.page-x-forward-enter-active {
  transition:
    transform 120ms ease-out,
    opacity 120ms linear;
}
.page-x-forward-enter-to {
  transform: translateX(0);
}
.page-x-forward-leave-from {
  transform: translateX(0);
}
.page-x-forward-leave-active {
  transition:
    transform 120ms ease-in,
    opacity 120ms linear;
}
.page-x-forward-leave-to {
  transform: translateX(-5px);
}
.page-x-backward-enter-from {
  transform: translateX(-5px);
}
.page-x-backward-enter-active {
  transition:
    transform 120ms ease-out,
    opacity 120ms linear;
}
.page-x-backward-enter-to {
  transform: translateX(0);
}
.page-x-backward-leave-from {
  transform: translateX(0);
}
.page-x-backward-leave-active {
  transition:
    transform 120ms ease-in,
    opacity 120ms linear;
}
.page-x-backward-leave-to {
  transform: translateX(5px);
}
.page-y-forward-enter-from {
  transform: translateY(-5px);
}
.page-y-forward-enter-active {
  transition:
    transform 120ms ease-out,
    opacity 120ms linear;
}
.page-y-forward-enter-to {
  transform: translateY(0);
}
.page-y-forward-leave-from {
  transform: translateY(0);
}
.page-y-forward-leave-active {
  transition:
    transform 120ms ease-in,
    opacity 120ms linear;
}
.page-y-forward-leave-to {
  transform: translateY(5px);
}
.page-y-backward-enter-from {
  transform: translateY(5px);
}
.page-y-backward-enter-active {
  transition:
    transform 120ms ease-out,
    opacity 120ms linear;
}
.page-y-backward-enter-to {
  transform: translateY(0);
}
.page-y-backward-leave-from {
  transform: translateY(0);
}
.page-y-backward-leave-active {
  transition:
    transform 120ms ease-in,
    opacity 120ms linear;
}
.page-y-backward-leave-to {
  transform: translateY(-5px);
}
.page-none-enter-active,
.page-none-leave-active {
  transition: opacity 100ms linear;
}
@media (prefers-reduced-motion: reduce) {
.page-x-forward-enter-active,
  .page-x-forward-leave-active,
  .page-x-backward-enter-active,
  .page-x-backward-leave-active,
  .page-y-forward-enter-active,
  .page-y-forward-leave-active,
  .page-y-backward-enter-active,
  .page-y-backward-leave-active,
  .page-none-enter-active,
  .page-none-leave-active {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
}
}