/* || ANIMATIONS */
@keyframes fade-in {
  from {
    opacity: var(--from, 0);
  }

  to {
    opacity: var(--to, 1);
  }
}

@keyframes translate-to-0 {
  to {
    translate: 0 0%;
  }
}

@keyframes scale-to-1 {
  to {
    scale: 1;
  }
}

.animate-fade-in {
  opacity: var(--from, 0);
  animation: fade-in var(--animation-duration, 1s) var(--animation-delay, 0s)
    ease-in-out forwards;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
    opacity: var(--to, 1);
  }
}

@keyframes x-transition {
  from {
    opacity: 0;
    scale: 0.8;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.x-transition-enter {
  animation: x-transition 125ms forwards;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.x-transition-leave {
  animation: x-transition 75ms forwards;
  animation-direction: reverse;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

/* END - ANIMATIONS */