.EditorTextWrapper {
  --editor-background-color: #000000;
  --editor-font-color: #ffffff;
  --editor-highlight-color: #0000ff;
}
@media (prefers-color-scheme: light) {
  .EditorTextWrapper {
    --editor-background-color: #ffffff;
    --editor-font-color: #000000;
    --editor-highlight-color: #ffff00;
  }
}

.EditorTextWrapper {
  position: relative;
  background: var(--editor-background-color);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  font-weight: normal;
  font-size: 1.3rem;
  text-align: initial;
}

.EditorTextArea,
.EditorUnderlay {
  color: var(--editor-font-color);
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  padding: 5px;
  box-sizing: border-box;
  margin: 0;
  line-height: normal;
}

.EditorTextArea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  resize: none;
  outline: none;
}

.EditorUnderlay {
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: scroll;

  .EditorHighlighted {
    background: var(--editor-highlight-color);
  }
}