@layer components {
  .spoutr-table {
    @apply bg-white rounded-lg shadow my-16;
  }

  .spoutr-table .table-header {
    @apply px-6 py-4 border-b border-gray-200 bg-blue rounded-t-lg;
    @apply flex items-center justify-between gap-4;
  }

  .spoutr-table .table-title {
    @apply text-xl font-semibold text-black;
  }

  .spoutr-table .table-wrapper {
    @apply overflow-x-auto;
  }

  .spoutr-table table {
    @apply min-w-full divide-y divide-gray-200;
  }

  .spoutr-table thead {
    @apply bg-gray-100;
  }

  .spoutr-table th {
    @apply px-6 py-3 text-left text-xs font-medium text-black uppercase tracking-wider;
  }

  .spoutr-table tbody {
    @apply bg-white divide-y divide-gray-200;
  }

  .spoutr-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-black;
  }

}