@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1; 
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(90px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-90px);
  }
}

/* define animations for the old and new content */
::view-transition-old(slide-it) {
  animation: 100ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(slide-it) {
  animation: 100ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* tie the view transition to a given CSS class */
.sample-transition {
  view-transition-name: slide-it;
}

.sidebar {
  view-transition-name: sidebar; /* Workaround to prevent the transition from appearing ontop of the sidebar */
}

.slashed-zero {
  font-variant-numeric: slashed-zero;
}

.ordinal {
  font-variant-numeric: ordinal;
}