@layer components {
  .table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--text-small);

    th, td {
      padding: var(--block-space-half) var(--inline-space-half);
      text-align: start;
      vertical-align: top;
      border-block-end: 1px solid var(--color-ink-lightest);
    }

    th {
      font-weight: 600;
      color: var(--color-ink);
    }

    td {
      color: var(--color-ink-darker);
    }
  }

  .table--striped {
    tbody tr:nth-child(odd) {
      background-color: oklch(var(--lch-ink-lightest) / 50%);
    }
  }

  .table--hover {
    tbody tr:hover {
      background-color: var(--color-ink-lightest);
    }
  }

  .table__header {
    background-color: var(--color-ink-darkest);
    color: var(--color-white);

    th {
      border: none;
      color: var(--color-white);
    }
  }
}