.table      { display: table; }
.table-head { display: table-header-group; }
.table-body { display: table-row-group; }
.table-row  { display: table-row; }
.table-cell { display: table-cell; }

.table {
  --padding-vertical: var(--spacing-sm);
  --padding-horizontal: var(--spacing-lg);

  border: var(--border-sm) solid var(--color-darkener);
  border-radius: var(--radius-md);
  /* margin: 0 calc(var(--padding-horizontal) * -1); */
  white-space: nowrap;
}

.table-actions {
  visibility: hidden;
}

.table-row:focus .table-actions,
.table-row:focus-within .table-actions,
.table-row:hover .table-actions {
  visibility: visible;
}

.table-row.variant--disabled {
  color: var(--color-dark);
}

.table-cell {
  border-top: var(--border-sm) solid var(--color-darkener);
  padding: var(--padding-vertical) calc(var(--padding-horizontal) / 2);
  vertical-align: middle;
  width: 0;
  min-height: 100px;
}

a.table-cell:hover {
  color: var(--color-primary);
}

.table-cell:first-child {
  padding-left: var(--padding-horizontal);
  width: 100%;
}

.table-cell:last-child {
  padding-right: var(--padding-vertical);
}

.table-head .table-cell {
  padding-top: var(--padding-horizontal);
}

.table-body .table-cell:not(:first-child) {
  color: var(--color-dark);
}

.table-body .table-cell:first-child {
  font-weight: var(--font-weight-heavy);
}

.table-row:first-child .table-cell {
  border-top: none;
}

.table-info {
  font-weight: var(--font-weight-normal);
}