/* Animations for View Transition API */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: slide-out;
}

::view-transition-new(root) {
  animation-name: slide-in;
}

@keyframes slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(var(--slide-distance));
    -webkit-transform: translateX(var(--slide-distance));
    -moz-transform: translateX(var(--slide-distance));
    -ms-transform: translateX(var(--slide-distance));
    -o-transform: translateX(var(--slide-distance));
}
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--slide-distance)));
    -webkit-transform: translateX(calc(-1 * var(--slide-distance)));
    -moz-transform: translateX(calc(-1 * var(--slide-distance)));
    -ms-transform: translateX(calc(-1 * var(--slide-distance)));
    -o-transform: translateX(calc(-1 * var(--slide-distance)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

:root {
  --slide-distance: -100%;
}
[data-transition-direction="left"] {
  --slide-distance: 100%;
}