:where(.table) {
  caption-side: bottom;
  font-size: var(--text-sm);
  inline-size: var(--size-full);

  caption {
    color: var(--color-text-subtle);
    margin-block-start: var(--size-4);
  }

  thead {
    color: var(--table-header-color, var(--color-text));
  }

  thead tr {
    border-block-end-color: var(--table-header-border-color, var(--color-border));
    border-block-end-width: 1.5px;
  }

  tbody tr {
    border-block-start-width: var(--border);
  }

  tbody tr:first-child {
    border-block-start-width: 0;
  }

  tr:hover {
    background-color: rgb(from var(--color-border-light) r g b / .5);
  }

  tr:has(:checked) {
    background-color: var(--color-border-light);
  }

  th {
    font-weight: var(--font-medium);
    text-align: start;
  }

  th, td {
    padding: var(--size-2);
  }

  tfoot {
    background-color: rgb(from var(--color-border-light) r g b / .5);
    border-block-start-width: var(--border);
    font-weight: var(--font-medium);
  }
}

.badge {
  align-items: center;
  border-radius: var(--radius-pill, var(--rounded-full));
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--size-1) var(--size-2_5);
}

.badge--positive {
  background-color: var(--color-primary);
  color: var(--color-text-reversed);
}

.badge--neutral {
  background-color: transparent;
  border: 1px solid var(--table-header-border-color, var(--color-border));
  color: var(--color-primary);
}