:root {
  --table-default-width: var(--size-950);
  --table-default-min-width: var(--size-600);
  --table-default-row-height: var(--size-60);
  --table-default-header-height: var(--size-38);
  --table-default-font: var(--font-type-body);
  --table-default-title-font: var(--font-type-title);
  --table-default-secondary-font: var(--font-type-caption);
  --table-default-header-font: var(--font-type-label-compact);
  --table-default-stack-gap: var(--space-0-25);
  --table-detailed-width: var(--size-1040);
  --table-detailed-min-width: var(--size-1040);
  --table-detailed-row-height: var(--size-64);
  --table-detailed-header-height: var(--size-44);
  --table-detailed-font: var(--font-type-label);
  --table-detailed-secondary-font: var(--font-type-caption);
  --table-detailed-header-font: var(--font-type-label-compact);
  --table-detailed-stack-gap: var(--space-1);
  --table-cell-padding: var(--space-2);
  --table-edge-padding: var(--space-4);
  --table-row-border: var(--control-border-width) solid var(--color-border);
  /* Neutral row hover differs from the blue accent highlight. */
  --table-row-hover-background: var(--color-neutral-hover);
  --table-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --table-focus-inset: calc(-1 * var(--focus-width));
  --table-primary-column-width: var(--size-276);
  --table-status-column-width: var(--size-148);
  --table-description-column-width: var(--size-260);
  --table-count-column-width: var(--size-100);
  --table-activity-column-width: var(--size-178);
  --table-indicator-column-width: var(--size-48);
  --table-icon-size: var(--space-4);
  --table-rtl-indicator-transform: rotate(var(--rotate-half));
}

/* Geometry and typography vary; all compositions share the property rules. */
.data-table {
  --table-width: var(--table-default-width);
  --table-min-width: var(--table-default-min-width);
  --table-row-height: var(--table-default-row-height);
  --table-header-height: var(--table-default-header-height);
  --table-font: var(--table-default-font);
  --table-title-font: var(--table-default-title-font);
  --table-secondary-font: var(--table-default-secondary-font);
  --table-header-font: var(--table-default-header-font);
  --table-stack-gap: var(--table-default-stack-gap);
}
.data-table--detailed {
  --table-width: var(--table-detailed-width);
  --table-min-width: var(--table-detailed-min-width);
  --table-row-height: var(--table-detailed-row-height);
  --table-header-height: var(--table-detailed-header-height);
  --table-font: var(--table-detailed-font);
  --table-title-font: var(--table-detailed-font);
  --table-secondary-font: var(--table-detailed-secondary-font);
  --table-header-font: var(--table-detailed-header-font);
  --table-stack-gap: var(--table-detailed-stack-gap);
}
.data-table {
  inline-size: 100%;
  max-inline-size: var(--table-width);
  min-inline-size: 0;
  overflow: auto;
  background: var(--color-surface);
  color: var(--color-foreground);
}
.data-table__table {
  inline-size: 100%;
  min-inline-size: var(--table-min-width);
  border-collapse: collapse;
  table-layout: fixed;
  font: var(--table-font);
  text-align: start;
}
.data-table__table > thead > tr > th,
.data-table__table > tbody > tr > :is(th, td) {
  box-sizing: border-box;
  padding: var(--table-cell-padding);
  vertical-align: middle;
  text-align: start;
  overflow-wrap: anywhere;
}
.data-table__table > :is(thead, tbody) > tr > :first-child { padding-inline-start: var(--table-edge-padding); }
.data-table__table > :is(thead, tbody) > tr > :last-child { padding-inline-end: var(--table-edge-padding); }
.data-table__table > thead > tr > th {
  block-size: var(--table-header-height);
  color: var(--color-muted-foreground);
  font: var(--table-header-font);
}
.data-table__table > tbody > tr > :is(th, td) {
  block-size: var(--table-row-height);
  border-block-end: var(--table-row-border);
  font: var(--table-font);
}
.data-table__table > tbody > tr:has(a[href]):hover { background: var(--table-row-hover-background); }
.data-table__column--primary { inline-size: var(--table-primary-column-width); }
.data-table__column--status { inline-size: var(--table-status-column-width); }
.data-table__column--description { inline-size: var(--table-description-column-width); }
.data-table__column--count { inline-size: var(--table-count-column-width); }
.data-table__column--activity { inline-size: var(--table-activity-column-width); }
.data-table__column--indicator { inline-size: var(--table-indicator-column-width); }
.data-table__table > :is(thead, tbody) > tr > .data-table__cell--end { text-align: end; }
.data-table__stack { display: flex; flex-direction: column; align-items: start; gap: var(--table-stack-gap); }
.data-table__cell--end > .data-table__stack { align-items: end; }
.data-table__cell--end > .data-table__icon { margin-inline-start: auto; }
.data-table__row--linked { position: relative; }
.data-table__row-link::after { content: ""; position: absolute; inset: 0; }
.data-table__row--linked:has(.data-table__row-link:focus-visible) {
  outline: var(--table-focus-outline);
  outline-offset: var(--table-focus-inset);
}
.data-table__title { margin: 0; font: var(--table-title-font); }
.data-table__secondary { margin: 0; color: var(--color-muted-foreground); font: var(--table-secondary-font); }
.data-table__link { color: inherit; text-decoration: none; }
.data-table__link:hover { text-decoration: underline; }
.data-table:focus-visible, .data-table__link:focus-visible {
  outline: var(--table-focus-outline);
  outline-offset: var(--table-focus-inset);
}
.data-table__icon { display: block; inline-size: var(--table-icon-size); block-size: var(--table-icon-size); color: var(--color-muted-foreground); }
.data-table__icon:dir(rtl) { transform: var(--table-rtl-indicator-transform); }