@import "tailwindcss";

@layer components {
  .btn {
    @apply inline-flex cursor-pointer items-center justify-center rounded-md bg-slate-900 px-3.5 py-2 text-sm font-medium text-white hover:bg-slate-700;
  }
  .btn-secondary {
    @apply inline-flex cursor-pointer items-center justify-center rounded-md border border-slate-300 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50;
  }
  .link {
    @apply cursor-pointer text-sm font-medium text-blue-700 hover:underline;
  }
  .link-danger {
    @apply cursor-pointer text-sm font-medium text-red-700 hover:underline;
  }
  .input {
    @apply block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-slate-500 focus:outline-none;
  }
  .label {
    @apply mb-1 block text-sm font-medium text-slate-700;
  }
  .hint {
    @apply mt-1 text-sm text-slate-500;
  }
  .card {
    @apply rounded-lg border border-slate-200 bg-white p-5;
  }
  .badge {
    @apply inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700;
  }
  .badge-green {
    @apply bg-green-100 text-green-800;
  }
  .badge-red {
    @apply bg-red-100 text-red-800;
  }
  .data-table {
    @apply w-full text-left text-sm;
  }
  .data-table th {
    @apply border-b border-slate-200 px-3 py-2 font-medium text-slate-500;
  }
  .data-table td {
    @apply border-b border-slate-100 px-3 py-2 align-top;
  }
}