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

@layer components {
  .pagination {
    @apply flex justify-center;
  }

  .pagination>* {
    @apply text-lg border border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-neutral-800;
  }

  .pagination a,
  .current,
  .gap {
    @apply text-lg py-1 px-3 inline-block;
  }

  .pagination .current {
    @apply bg-yellow-400 text-neutral-800 font-bold;
  }

  .pagination *:last-child {
    @apply rounded-r-lg;
  }

  .pagination *:first-child {
    @apply rounded-l-lg;
  }

  .link {
    @apply text-yellow-400 hover:underline;
  }

  .btn-primary {
    @apply cursor-pointer inline-flex justify-center gap-2 items-center border border-yellow-400 bg-yellow-400 text-neutral-900 py-3 px-4 rounded-xl font-semibold hover:shadow-yellow-700 hover:shadow-md;
  }

  .btn-secondary {
    @apply cursor-pointer inline-flex justify-center gap-2 items-center border border-yellow-400 bg-neutral-900 text-yellow-400 py-3 px-4 rounded-xl font-semibold hover:bg-yellow-400 hover:text-neutral-900 hover:shadow-yellow-700 hover:shadow-md;
  }

  .btn-success {
    @apply cursor-pointer inline-flex justify-center gap-2 items-center border border-green-400 bg-neutral-900 text-green-400 py-3 px-4 rounded-xl font-semibold hover:bg-green-400 hover:text-neutral-900 hover:shadow-green-700 hover:shadow-md;
  }

  .btn-danger {
    @apply cursor-pointer inline-flex justify-center gap-2 items-center border border-red-400 bg-neutral-900 text-red-400 py-3 px-4 rounded-xl font-semibold hover:bg-red-400 hover:text-neutral-900 hover:shadow-red-700 hover:shadow-md;
  }

  .btn-neutral {
    @apply cursor-pointer inline-flex justify-center gap-2 items-center border border-neutral-400 bg-neutral-900 text-neutral-300 py-3 px-4 rounded-xl font-semibold hover:bg-neutral-300 hover:text-neutral-900 hover:shadow-neutral-700 hover:shadow-md;
  }

  .btn-sm {
    @apply cursor-pointer py-2 px-3 rounded-xl font-semibold;
  }

  .alert {
    @apply flex justify-center gap-2 items-center border py-3 px-4 rounded-xl font-semibold;
  }

  .alert-error {
    @apply border-red-400 bg-red-400 text-neutral-900;
  }

  .alert-success {
    @apply border-green-400 bg-green-400 text-neutral-900;
  }

  .alert-info {
    @apply border-blue-400 bg-blue-400 text-neutral-900;
  }

  .user-markdown ul {
    @apply list-disc list-inside ml-4;
  }

  .user-markdown ol {
    @apply list-decimal list-inside ml-4;
  }

  .user-markdown p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply mt-2;
  }
}