.x-table {
  border-radius: var(--x-table-border-radius);
  background-color: var(--x-table-background-color, var(--color-body-primary));
  max-inline-size: 100%;
  overflow: auto;

  :where(table) {
    inline-size: 100%;
    vertical-align: middle;
    background-color: inherit;
  }

  :where(thead tr:not(:first-child), tbody tr, tfoot tr) {
    border-block-start: var(--x-table-cell-border-block-width) solid var(--x-table-border-color, var(--color-body-tertiary));
  }

  :where(td, th) {
    padding: var(--x-table-cell-spacing-y) var(--x-table-cell-spacing-x);
    block-size: var(--x-table-cell-block-size);
    border-color: var(--x-table-border-color, var(--color-body-tertiary));
    border-inline-width: var(--x-table-cell-border-inline-width, 0);

    &:first-child {
      padding-inline-start: var(--x-table-padding-inline);
      border-inline-start: 0;
    }

    &:last-child {
      padding-inline-end: var(--x-table-padding-inline);
      border-inline-end: 0;
    }
  }
}