.lsp-diagnostics-panel-content {
  overflow-y: auto;
}

.lsp-diagnostics-placeholder {
  padding: 8px;
  color: var(--jp-content-font-color2);
  text-align: center;
}

.lsp-diagnostics-placeholder > h3 {
  margin-bottom: var(--jp-content-heading-margin-bottom);
}

.lsp-diagnostics-listing {
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);
  font-size: var(--jp-ui-font-size1);
  border-spacing: 0;
  /* required to preserve borders of `<th>` when using position:sticky */
  border-collapse: separate;
  width: 100%;
}

.lsp-diagnostics-listing thead {
  box-shadow: var(--jp-toolbar-box-shadow);
}

.lsp-diagnostics-listing tbody {
  overflow-y: auto;
  overflow-x: hidden;
}

.lsp-diagnostics-listing th,
.lsp-diagnostics-listing td {
  padding: 4px 12px 2px 12px;
  height: 18px;
}

.lsp-diagnostics-listing th {
  font-weight: 500;
  text-align: left;
  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
  background: var(--jp-layout-color1);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  user-select: none;
}

.lsp-diagnostics-listing th:not(:first-child) {
  border-left: var(--jp-border-width) solid var(--jp-border-color2);
}

.lsp-diagnostics-listing th:hover {
  background: var(--jp-layout-color2);
}

.lsp-diagnostics-listing tbody tr:hover {
  background: var(--jp-layout-color2);
}

.lsp-diagnostics-listing thead th > div {
  flex-direction: row;
  display: flex;
}

.lsp-diagnostics-listing thead th > div > label {
  flex: 1;
  text-overflow: ellipsis;
}

.lsp-sort-icon {
  flex: 0;
  height: var(--jp-ui-font-size1);
  width: var(--jp-ui-font-size1);
}

.lsp-sort-icon svg {
  display: inline;
  height: auto;
}

.lsp-diagnostics-listing thead th:not(.lsp-sorted-header) .lsp-sort-icon {
  opacity: 0;
}

.lsp-diagnostics-listing thead th:not(.lsp-sorted-header):hover .lsp-sort-icon {
  opacity: 0.5;
}