@layer hubleto-framework {

  /* CLASSES in alphabetical order */

  .hubleto.component.table { @apply w-full; }
  .hubleto.component.table.loading { opacity: 0.25; }
  .hubleto.component.table .table-header { @apply flex flex-col md:flex-row items-center gap-2 mb-2 justify-between; }
  .hubleto.component.table .table-header-left { @apply w-full flex flex-1 gap-1 items-center; }
  .hubleto.component.table .table-header-title { @apply flex-1 text-left text-primary text-center text-2xl mr-2 dark:text-white; }
  .hubleto.component.table .table-header-right { @apply flex flex-1 text-center gap-1 justify-end; }
  .hubleto.component.table .table-header-search { @apply flex flex-4 gap-2 w-full p-1 border-slate-200 rounded-none dark:border-slate-600 dark:bg-slate-950 dark:text-white; }
  .hubleto.component.table .table-header-search.active { @apply bg-yellow-50 dark:bg-primary dark:text-white; }
  .table-header-search.active { @apply bg-yellow-50 dark:bg-primary dark:text-white; }
  /* .hubleto.component.table .table-body { @apply border border-slate-200 dark:border-none; } */
  .hubleto.component.table .table-body tr { @apply border border-transparent divide-x hover:bg-gray-100; box-sizing: border-box; }
  .hubleto.component.table .table-body tr:hover td { @apply bg-gray-100 dark:bg-slate-800; }
  .hubleto.component.table .table-body thead th td { @apply p-0.5; margin: 1px; }
  .hubleto.component.table .table-body thead th td { @apply p-0.5; margin: 1px; }
  .hubleto.component.table .table-body tbody tr td { @apply p-0.5; margin: 1px; }
  /* .hubleto.component.table .table-body tbody tr td > div { @apply; } */
  .hubleto.component.table .table-body tbody tr td .inline-edit-icon { @apply invisible cursor-pointer; }
  .hubleto.component.table .table-body tbody tr td:hover .inline-edit-icon { @apply visible; }
  .hubleto.component.table .table-body tr.highlighted { @apply divide-none text-primary border-primary border-l border-l-6 border-t border-t-1; }
  /* .hubleto.component.table .table-body tr.highlighted td > div { @apply border-b border-primary dark:bg-slate-600 dark:border-slate-600; } */
  .hubleto.component.table .table-body tr.highlighted td:nth-child(1) > div { @apply ml-2; }
  .hubleto.component.table .table-body tr td { @apply cursor-pointer; }
  .hubleto.component.input.table { @apply max-w-[100%] }

  .hubleto.component.table.header-style-1 { @apply bg-green-50 }

  .hubleto.component.table .table-body tbody tr td .to-be-deleted { @apply bg-red-500; }
  .hubleto.component.table .table-body tbody tr td .to-be-deleted input { @apply text-red-500; }

  .hubleto.component.table .table-cell-content { @apply truncate max-w-90; }
  .hubleto.component.table .table-cell-content.column-lookup { @apply text-primary dark:text-white; }
  .hubleto.component.table .table-cell-content.column-int { @apply text-right font-semibold; }
  .hubleto.component.table .table-cell-content.column-float { @apply text-right font-semibold; }
  .hubleto.component.table .table-cell-content.column-date { @apply text-right; }
  .hubleto.component.table .table-cell-content.column-datetime { @apply text-right; }
  .hubleto.component.table .table-cell-content.column-boolean { @apply text-center; }
  .hubleto.component.table .table-sidebar-filter { @apply hidden md:block; }

  .hubleto.component.table .column-search .input-element { @apply bg-white dark:bg-slate-800; }

  .hubleto.component.input { @apply inline-flex justify-between items-center w-full; }

  .hubleto.component.input input,
  .hubleto.component.input textarea,
  .hubleto.component.input select { @apply border border-slate-200 flex flex-1 rounded-sm w-full p-0.5 dark:border-slate-500; }

  .hubleto.component.input.int input { @apply max-w-[160px]; }
  .hubleto.component.input.date input { @apply max-w-[160px]; }
  .hubleto.component.input.datetime input { @apply max-w-[160px]; }

  .hubleto.component.input .inner { @apply flex w-full items-center rounded gap-1; }
  .hubleto.component.input .inner .value-element { @apply inline-flex flex-1 items-center pr-1 mr-1 dark:text-white; min-height: 1.5rem; }
  .hubleto.component.input .inner .input-element { @apply flex-1 flex flex-row gap-1 items-center dark:text-white; min-height: 1.5rem; }
  .hubleto.component.input .inner .value-element .no-value { @apply text-gray-300 italic after:content-['N/A']; }
  .hubleto.component.input .inner .inline-editing-buttons { @apply flex flex-1 gap-1 invisible; }
  .hubleto.component.input .inner .inline-editing-buttons.always-visible { @apply !visible; }
  .hubleto.component.input .inner .btn { @apply shadow-none }
  .hubleto.component.input .inner:hover .inline-editing-buttons { @apply !visible }

  .hubleto.component.input .input-after { @apply flex-1 ml-2; }
  .hubleto.component.input .input-unit { @apply flex-1 ml-2; }

  .is-invalid, .hubleto.component.input.invalid {
    @apply !border-red-500 text-red-500;
  }

  .is-invalid .hubleto-lookup > div:nth-of-type(1),
  .hubleto.component.input.invalid .hubleto-lookup > div:nth-of-type(1) {
    @apply !border-red-500;
  }
}