.ui-table-shell {
  --ui-table-row-accent-width: var(--ui-space-1);
  background: var(--ui-table-bg);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-table-shell-radius);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-text-primary);
  overflow: auto;
}

.ui-table {
  --ui-table-row-accent-width: var(--ui-space-1);
  border-collapse: collapse;
  color: var(--ui-text-primary);
  margin: 0;
  width: 100%;
}

.ui-table th,
.ui-table td {
  border-bottom: 1px solid var(--ui-table-border);
  padding: var(--ui-table-cell-padding);
  text-align: left;
  vertical-align: middle;
}

.ui-table th {
  background: var(--ui-table-head-bg);
  color: var(--ui-text-secondary);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.ui-table tbody tr:hover {
  background: var(--ui-table-row-hover-bg);
}

.ui-table tbody tr:focus-within {
  outline: 0;
}

.ui-table tbody tr:focus-within > td:first-child,
.ui-table tbody tr:focus-within > th:first-child {
  box-shadow: inset var(--ui-table-row-accent-width) 0 0 0 var(--ui-border-selected);
}

.ui-table tr.is-selected,
.ui-table tr[aria-selected="true"] {
  background: var(--ui-table-row-selected-bg);
}

.ui-table tr.is-selected > td:first-child,
.ui-table tr.is-selected > th:first-child,
.ui-table tr[aria-selected="true"] > td:first-child,
.ui-table tr[aria-selected="true"] > th:first-child {
  box-shadow: inset var(--ui-table-row-accent-width) 0 0 0 var(--ui-border-selected);
}

.ui-table tr.is-warning {
  background: var(--ui-color-warning-muted);
}

.ui-table--dense th,
.ui-table--dense td {
  padding: var(--ui-table-dense-cell-padding);
}

.ui-table--matrix {
  border-collapse: separate;
  border-spacing: 0;
}

.ui-table--matrix th,
.ui-table--matrix td {
  border-bottom: 1px solid var(--ui-table-border);
  border-right: 1px solid var(--ui-table-border);
}

.ui-table--matrix th:first-child,
.ui-table--matrix td:first-child {
  border-left: 0;
}

.ui-table--matrix tbody tr:last-child td {
  border-bottom: 0;
}

.ui-table--sticky-head th {
  position: sticky;
  top: 0;
  z-index: var(--ui-z-sticky);
}

.ui-table__actions {
  text-align: right;
  white-space: nowrap;
}