.pcRawError {
  border: 1px solid $pceError;
}

.pcEditorWrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pcTable {
  width: 100%;
}

.pcTable table {
  border-collapse: collapse;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.pcTable td {
  margin: 0 !important;
  padding: 2px !important;
}

.pcTable .buttons {
  width: 0;       /* minimize cell width */
}

.pcTable .buttons button {
  cursor: pointer;
  padding: 2px 5px;
}

.pcTable .buttons button.delete {
  color: $pceDeleteForeground !important;
  background: $pceDeleteBackground !important;
  border: 1px solid $pceDeleteBorder !important;
}

.pcTable .buttons .delete:hover {
  color: $pceDeleteHoverForeground !important;
  background: $pceDeleteHoverBackground !important;
  border: 1px solid $pceDeleteHoverBorder !important;
}

.pcTable .key {
  width: 0;
}

.pcTable .value {
}

.pcTable div.editor {
}

.pcTable div.editor table tr {
  background: none;
}

.pcTable div.editor input[type="text"] {
  padding: 5px !important;
}

.pcTable div.editor label {
  font-size: 100%;
  margin-right: 1em;
}

.pcTable input.new {
  width: 100%;
}

.pcTable textarea {
  width: 100%;
}

.pcTable .invalid {
  border: 1px solid $pceError;
}

.pcTable div.editor div.details table {
  width: auto !important;
}

.pcTable div.editor div.details table td {
  padding: 3px;
}

.pcTable div.editor div.details select {
  padding: 2px !important;
}

.pcTable div.editor div.details input[type="text"] {
  width: auto !important;
  padding: 2px !important;
}

.pcTable div.editor div.details table tr.invalid {
  background: $pceErrorBackground;
  border: none;
}

.pcTable div.editor div.details {
  max-height: 250px;
  overflow-y: auto;
}

/* The autocomplete suggestions list */
.pcSuggestions {
  position: absolute;
  z-index: 1;
  border: 1px solid $pceAutocompleteBorder;
  background: $pceAutocompleteBackground;
  visibility: hidden;
  margin: 0;
  padding: 2px;
  font-size: 90%;

  min-width: 500px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}

.pcSuggestions div {
  display: block;
  padding: 5px;
  cursor: pointer;
}

.pcSuggestions div.new {
  color: #000;
  font-style: italic;
}

.pcSuggestions div.error {
  color: $pceError;
  font-style: italic;
}

.pcSuggestions div.entry {
  color: #000;
  white-space: nowrap;
}

.pcSuggestions dfn {
  margin-left: 10px;
  color: #888;
  font-size: 90%;
  text-overflow: ellipsis;
}

.pcSuggestions div.entry.selected, .pcSuggestions div.entry:hover {
  background: #00f;
  color: #fff;
}

.pcSuggestions div.entry.selected dfn, .pcSuggestions div.entry:hover dfn {
  color: #ccc;
}

.pcSuggestions span {
  pointer-events: none;
}

.pcSuggestions span.match {
  color: $pceAutocompleteMatchForeground;
  background: $pceAutocompleteMatchBackground;
}
