.vuiKvTable {
  display: table;
  width: 100%;
  table-layout: auto;
  border: 1px solid var(--vui-color-border-light);
  border-collapse: collapse;
}

.vuiKvTableRow {
  display: table-row;
}

.vuiKvTableRow--header {
  background-color: var(--vui-color-light-shade);
}

// Key cell: row header, subdued color, natural (non-wrapping) width.
.vuiKvTableCell--key {
  display: table-cell;
  color: var(--vui-color-subdued-shade);
  white-space: nowrap;
  font-weight: $fontWeightNormal;
  font-size: $fontSizeStandard;
  text-align: left;
  border-bottom: 1px solid var(--vui-color-border-light);
}

// Value cell: consumes all remaining width in auto-layout table.
.vuiKvTableCell--value {
  display: table-cell;
  width: 100%;
  font-size: $fontSizeStandard;
  border-bottom: 1px solid var(--vui-color-border-light);
}

.vuiKvTableRow:last-child .vuiKvTableCell--key,
.vuiKvTableRow:last-child .vuiKvTableCell--value {
  border-bottom: none;
}

.vuiKvTable--paddingXxs .vuiKvTableCell--key,
.vuiKvTable--paddingXxs .vuiKvTableCell--value {
  padding: $sizeXxs $sizeS;
}

.vuiKvTable--paddingXs .vuiKvTableCell--key,
.vuiKvTable--paddingXs .vuiKvTableCell--value {
  padding: $sizeXs $sizeS;
}

.vuiKvTable--paddingS .vuiKvTableCell--key,
.vuiKvTable--paddingS .vuiKvTableCell--value {
  padding: $sizeS $sizeS;
}

.vuiKvTable--alignTop .vuiKvTableCell--key,
.vuiKvTable--alignTop .vuiKvTableCell--value {
  vertical-align: top;
}

.vuiKvTable--alignMiddle .vuiKvTableCell--key,
.vuiKvTable--alignMiddle .vuiKvTableCell--value {
  vertical-align: middle;
}

.vuiKvTable--alignBottom .vuiKvTableCell--key,
.vuiKvTable--alignBottom .vuiKvTableCell--value {
  vertical-align: bottom;
}

// Header row overrides: match the original thead th appearance regardless of
// the table's padding variant.
.vuiKvTableRow--header .vuiKvTableCell--key,
.vuiKvTableRow--header .vuiKvTableCell--value {
  color: inherit;
  font-size: $fontSizeSmall;
  font-weight: $fontWeightBold;
  padding: $sizeXs $sizeS;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}