table {
  --table-background: var(--background);
  --table-color: var(--color);
  --table-border-color: var(--gray-20);
  --table-border-style: solid;
  --table-border-width: 1px;
  --table-hover: var(--color-rgb);
  --table-padding: var(--spacing-scale-3x);
  --table-font-weight: var(--font-weight-medium);
  --table-th-background: var(--background-alternative);
  --table-th-font-weight: var(--font-weight-semi-bold);
  --table-row-size: var(--spacing-scale-2x);
  border-collapse: collapse;
  width: 100%;
}
th {
  background-color: var(--background-alternative);
  font-weight: var(--table-th-font-weight);
}
td {
  font-weight: var(--table-font-weight);
}
td,
th {
  color: var(--color);
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-medium);
  padding: var(--table-row-size) var(--table-padding);
}
td:not([align]),
th:not([align]) {
  text-align: left;
}
tr.is-selected,
tr.selected {
  --color: var(--color-dark);
  --color-rgb: var(--color-dark-rgb);
  --text-color: var(--color);
  --interactive: var(--interactive-dark);
  --interactive-rgb: var(--interactive-dark-rgb);
  --visited: var(--visited-dark);
  --hover: var(--hover-dark);
  --pressed: var(--pressed-dark);
  --focus-color: var(--focus-color-dark);
  --focus: var(--focus-color);
}
tr.is-selected td,
tr.is-selected th,
tr.selected td,
tr.selected th {
  background-color: var(--selected);
}
tr:hover td {
  background-image: linear-gradient(
    rgba(var(--color-rgb), var(--hover)),
    rgba(var(--color-rgb), var(--hover))
  );
}
tbody td,
tbody th {
  border-bottom: var(--table-border-width) var(--table-border-style)
    var(--table-border-color);
}