@theme {
  /* Animations */
  --animate-slide-in-down: slideInDown 0.3s ease-out forwards;
  --animate-slide-out-up: slideOutUp 0.3s ease-in forwards;
  --animate-slide-in-up: slideInUp 0.3s ease-out forwards;
  --animate-slide-out-down: slideOutDown 0.3s ease-in forwards;

  @keyframes slideInDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideOutUp {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  @keyframes slideInUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideOutDown {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(100%);
      opacity: 0;
    }
  }
}