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

@layer components {
  .datatable-input {
    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
  }

  .datatable-search {
    @apply float-right my-2;
  }

  .datatable-selector {
    @apply p-2 rounded-lg text-gray-900;
  }

  .datatable-dropdown {
    @apply float-left;
  }

  .datatable-dropdown>label,
  .datatable-info {
    @apply text-slate-900 dark:text-slate-400;
  }
  
  .datatable-table, .datatable-pagination {
    @apply text-slate-900 dark:text-slate-400;
  }

  .datatable-pagination {
    @apply text-center flex justify-center mt-4;
  }
  .datatable-pagination-list {
    @apply flex list-none p-0;
  }
  .datatable-pagination-list-item {
    @apply mx-1;
  }
  .datatable-pagination-list-item-link {
    @apply px-2 py-1 text-xs text-gray-900 bg-white border border-gray-200 rounded-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700;
  }
  .datatable-active .datatable-pagination-list-item-link {
    @apply bg-gray-100 dark:bg-gray-700;
  }
  .datatable-disabled .datatable-pagination-list-item-link {
    @apply text-gray-400 cursor-not-allowed;
  }
}
[x-cloak=""] { display: none !important;}

@media screen and (max-width: 768px) {
  [x-cloak="mobile"] { display: none !important; }
}