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

@layer components {
    .btn {
        @apply font-bold py-2 px-4 rounded inline-flex items-center cursor-pointer
    }

    .btn-sm {
        @apply font-bold py-1 px-2 rounded inline-flex items-center cursor-pointer
    }

    .btn-red {
        @apply bg-red-200 hover:bg-red-300 text-red-800
    }

    .btn-indigo {
        @apply bg-indigo-200 hover:bg-indigo-300 text-indigo-800
    }

    .btn-blue {
        @apply bg-blue-200 hover:bg-blue-300 text-blue-800
    }

    .btn-gray {
        @apply bg-gray-200 hover:bg-gray-300 text-gray-800
    }

    .select {
        @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5
    }

    .dashboard-cell {
        @apply text-sm text-gray-900 px-6 py-2 text-left
    }

    .dashboard-header-cell {
        @apply font-medium uppercase
    }

    .dashboard-content-cell {
        @apply font-light whitespace-nowrap
    }

    .datepicker-field {
        @apply bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
    }

    .checkbox {
        @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2
    }

    .table-row {
        @apply border-b odd:bg-white even:bg-gray-50
    }

    .table-row.error {
        @apply border-b-red-200 bg-red-100
    }

    .btn.disabled {
        @apply opacity-50 cursor-not-allowed
    }

}