@layer components {
  .table-responsive {
    @apply overflow-x-scroll p-px;
  }

  .table {
    @apply w-full divide-y divide-gray-200 bg-white text-sm rounded-sm ring-1 ring-gray-200;

    & thead {
      & th {
        @apply px-3 py-3 font-medium text-left;
      }

      & th:first-child {
        @apply rounded-tl;
      }

      & th:last-child {
        @apply rounded-tr;
      }
    }

    & tr:last-child {
      & td:first-child {
        @apply rounded-bl;
      }

      & td:last-child {
        @apply rounded-br;
      }
    }

    & tbody {
      @apply divide-y divide-gray-200;

      & tr {
        @apply hover:bg-gray-50;

        & td {
          @apply px-3 py-3 text-left;
        }
      }
    }
  }

  .table.table-sm {
    @apply text-xs;

    & thead {
      & th {
        @apply px-2.5 py-2;
      }
    }

    & tbody {
      & tr {
        & td {
          @apply px-2.5 py-2;
        }
      }
    }
  }
}