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

@layer components {
  .btn-primary {
    @apply bg-teal-200 hover:bg-teal-300 text-teal-900 font-bold py-2 px-4 rounded;
  }

  .form-input {
    @apply text-slate-900 dark:bg-slate-500 dark:text-slate-50;
  }

  .form-checkbox {
    @apply text-teal-500 w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-1 focus:ring-teal-300;
  }

  .form-radio {
    @apply text-teal-500 w-4 h-4 border border-gray-300 bg-gray-50 focus:ring-1 focus:ring-teal-300;
  }

  .table {
    @apply table-auto w-full text-left text-slate-700 dark:text-slate-100;
  }

  .table-col {
    @apply text-left px-6 py-3;
  }
}