@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .fade-out {
    animation: fadeOut 0.5s ease-in-out forwards;
  }

  /* Error field styling */
  .error-field {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500;
  }

  /* Pagy styles */
  .pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;
  }
  
  .pagy a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
  }
  
  .pagy a:not(.gap):hover {
    @apply bg-gray-300;
  }
  
  .pagy a:not([href]) {
    @apply text-gray-300 bg-gray-100 cursor-default;
  }
  
  .pagy a.current {
    @apply text-white bg-octopus-teal;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}