:where(.table) {
  caption-side: bottom;
  inline-size: var(--size-full);

  caption {
    color: var(--color-text-subtle);
    margin-block-start: var(--size-4);
  }

  thead {
    color: var(--color-text-subtle);
  }

  tbody tr {
    border-block-start-width: var(--border);
  }

  tr:hover {
    background-color: rgb(from var(--color-border-light) r g b / 50%);
  }

  th {
    font-weight: var(--font-medium);
    text-align: start;
  }

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

  tfoot {
    background-color: rgb(from var(--color-border-light) r g b / 50%);
    border-block-start-width: var(--border);
    font-weight: var(--font-medium);
  }
}