.zebra-table,
%zebra-table {
  --padding: .5rem;

  th,
  td {
    padding: var(--padding);
  }

  thead {
    tr {
      background-color: var(--color-row-header);
    }
  }

  tbody {
    tr {
      &:nth-child(odd) {
        background-color: var(--color-row-odd);
      }

      &:nth-child(even) {
        background-color: var(--color-row-even);
      }
    }
  }
}

.responsive-table,
%responsive-table {
  --padding: .5rem;

  @include respond-to-max(s) {
    th {
      display: none;
    }

    td {
      display: grid;
      gap: var(--padding);
      grid-template-columns: 12ch auto;

      &::before {
        content: attr(aria-label) ':';
        font-weight: var(--fw-bold);
      }

      &:first-of-type {
        padding-block-start: var(--padding);
      }

      &:last-of-type {
        padding-block-end: var(--padding);
      }
    }
  }
}