/* Table.css */
.TableWrapper {
  position: relative;
  padding-left: 27px;
  padding-right: 15px;
  contain: strict;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.Table {
  width: 100%;
  table-layout: fixed;
  contain: content; /* TODO strict? */
  border-collapse: collapse;
  outline: none;
}

.TableHeading {
  text-align: left;
}

.TableBody {
  white-space: pre;
  overflow-y: auto;
  user-select: none;
  contain: content; /* TODO strict? */
}

.TableRow {
  height: 24px;
  contain: strict;
}

/* TODO avoid complex css */
/* TODO move this to keybindings css */
.TableRow:where(:not(:hover, .TableRowSelected)) .KeyBindingsEditButton {
  display: none;
}

.TableRowOdd {
  background: color-mix(in srgb, var(--WorkbenchForeground) 4%, transparent);
}

.TableRow:where(:hover) {
  color: var(--ListHoverForeground, var(--WorkbenchForeground));
  background: var(--ListHoverBackground, color-mix(in srgb, var(--WorkbenchForeground) 8%, transparent));
}

.TableRowSelected {
  background: var(--ListInactiveSelectionBackground, color-mix(in srgb, var(--WorkbenchForeground) 12%, transparent));
}

.Table:focus .TableRowSelected {
  background: var(--ListActiveSelectionBackground, color-mix(in srgb, var(--FocusBorder, var(--WorkbenchForeground)) 34%, transparent));
  color: var(--ListActiveSelectionForeground, var(--WorkbenchForeground));
}

.TableCell {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap;
  padding-right: 8px;
  padding-left: 10px;
}

.TableCellInvalid {
  text-decoration: 1px solid red underline;
  text-underline-offset: 3px;
}

.TableCellInvalid .Link,
.TableCellInvalid .Link:hover {
  text-decoration: inherit;
}

.ChatDebugView .TableWrapper {
  padding: 0;
}
