@layer components {

  .table-wrapper {
    min-width: 100%;
    overflow-x: auto;
    margin: 0 -1rem;
    display: flex;

    > div {
      padding: 0 1rem;
      display: inline-block;
      flex-grow: 1;
    }

    table {
      min-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 {
        max-width: 40ch;
        padding: .5rem;
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}