x-table-row:first-of-type {
  color: var(--x-label-text-color);
  font-size: var(--x-caption-font-size);
  font-weight: var(--x-caption-font-weight);
  line-height: var(--x-caption-line-height);
  letter-spacing: var(--x-caption-letter-spacing);
  cursor: default;
  background-color: var(--x-swatch-gray-950);
  height: 40px;
}

x-table-row {
  box-shadow: inset 0 1px 0 0 var(--x-swatch-gray-700);
}

x-table-row:first-of-type {
  box-shadow: none;
}

x-table-row:last-of-type {
  box-shadow:
    inset 0 1px 0 0 var(--x-swatch-gray-700),
    inset 0 -1px 0 0 var(--x-swatch-gray-700);
}

x-table-row + x-table-row {
  height: 56px;
}

x-table-row {
  --x-column-1-width: 120px;
  --x-column-1-flex: 0 0 auto;

  --x-column-2-flex: 1 0 auto;
  --x-column-2-width: 240px;

  --x-column-3-width: 80px;
  --x-column-3-flex: 0 0 auto;
  --x-column-3-background: rgba(0, 0, 0, 0.15);

  --x-column-4-width: 80px;
  --x-column-4-min-width: 40px; /* 24 content + 16 margin (default) */

  --x-column-5-width: 80px;
  --x-column-5-flex: 0 0 auto;

  /* --x-table-row-margin: 0; */
  /* @TODO demo --x-column-n-max-width */
}

x-table-row > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.1);
}

x-table-row:not(:first-of-type) [slot='column-3'] {
  height: 100%;
}

/* calculate the minimum width as defined above */
#demo2 {
  max-width: calc(120px + 240px + 80px + 40px + 80px);
  margin: var(--x-margin-xxlarge) 0 0 0;
}