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

@layer components {
  .btn-brand {
    @apply px-5 py-2.5 me-2 mb-2;
    @apply h-[40px] inline-block;
    @apply text-sm font-medium rounded-lg;
    @apply text-white;
    @apply bg-brand dark:bg-brand-dark;
    @apply hover:bg-brand-light dark:hover:bg-brand;
    @apply focus:ring-4 focus:ring-brand-dark dark:focus:ring-brand-lighter outline-none;
  }

  .btn-secondary {
    @apply px-5 py-2.5 me-2 mb-2;
    @apply h-[40px] inline-block;
    @apply text-sm font-medium rounded-lg;
    @apply text-gray-900 dark:text-gray-300;
    @apply bg-gray-300 hover:bg-gray-400;
    @apply focus:ring-4 focus:ring-gray-500 outline-none;
    @apply dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-500;
  }
}