:root {
  --in-transition-duration: 0.2s;
  --out-transition-duration: 0.15s;
}

.slide-in-left {
  animation: slide-in-left var(--in-transition-duration) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slide-in-left {
  0% {
      transform: translateX(50%);
      opacity: 0;
  }
  20% {
      opacity: 0;
  }
  100% {
      transform: translateX(0);
      opacity: 1;
  }
}

.slide-in-right {
  animation: slide-in-right var(--in-transition-duration) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slide-in-right {
  0% {
      transform: translateX(-50%);
      opacity: 0;
  }
  20% {
    opacity: 0;
}
  100% {
      transform: translateX(0);
      opacity: 1;
  }
}

.slide-out-right {
  animation: slide-out-right var(--out-transition-duration) ease-in forwards;
}

@keyframes slide-out-right {
  0% {
      transform: translateX(0);
      opacity: 1;
  }
  100% {
      transform: translateX(50%);
      opacity: 0;
  }
}

.slide-out-left {
  animation: slide-out-left var(--out-transition-duration) ease-in forwards;
}

@keyframes slide-out-left {
  from {
      transform: translateX(0);
      opacity: 1;
  }
  to {
      transform: translateX(-50%);
      opacity: 0;
  }
}