@tailwind components;

@layer components {
  .table-ui th {
    @apply bg-[#5987bf] px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2] text-[#fff];
  }
  .table-ui td {
    @apply border-b border-b-border px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2] text-[#666];
  }

  .table-ui.secondary th {
    @apply border border-border bg-[#eaf3fb] text-[#647784];
  }

  .table-ui.secondary td {
    @apply border border-border;
  }

  .table-ui.line th {
    @apply border-0 border-b-2 border-t border-b-[#d4e0ea] border-t-[#d4e0ea] bg-[#fff] text-[#555];
  }

  .table-ui.line td {
    @apply border-b border-b-border;
  }

  [data-mode="dark"] {
    .table-ui th {
      @apply bg-[#5e7b9c] text-[#fff];
    }
    .table-ui.secondary th {
      @apply bg-[#1a1c1d];
    }
    .table-ui.line th {
      @apply bg-[#0a0a0a];
    }
  }
}