@layer components {

  .table-wrapper {
    width: 100%;
    overflow-x: scroll;

    table {
      width: 100%;
      border-collapse: collapse;

      thead {
        border-block-end: 1px solid var(--color-text-softest);
      }

      tr:nth-child(odd) {
        background-color: var(--color-surface-variant);
      }

      td, th {
        padding: .5rem;
        text-align: start;
      }
    }
  }
}