@charset "utf-8";

.editor {
  position: relative;

  font-size: 14px;
  line-height: 1.25em;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.editor-scrollbox {
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: inherit;
}
.editor-textarea,
.editor-highlight,
.editor-caret-layer
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: block;
  padding: .5em 1em .5em 4.5ch;
  margin: 0;
  overflow: hidden; /* inconsistent scroll bars mess up the width */

  border: none;
  outline: none;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;

  white-space: pre-wrap;
  word-wrap: normal; /* word-wrap = overflow-wrap */
  overflow-wrap: normal;
  word-break: normal;
  tab-size: 4;
}
.editor-highlight {
  z-index: 2;
  pointer-events: none;
  padding-left: .5ch; /* line numbers */
}
.editor-textarea {
  z-index: 0;
  resize: none;
  opacity: 0;
}


.editor-caret-layer {
  /* Caret layer contains caret and selection.
   * Selection should be underneath highlight layer (z-index),
   * caret above. */
  position: static;
  pointer-events: none;
  color: transparent;
}
@keyframes caretBlink {
  0% { opacity: 1; }
  40% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}
.editor-caret {
  border: 1px solid black; /* caret color */
  margin: 0 -1px;
}
.editor-caret.blink {
  animation: caretBlink .6s linear infinite alternate;
  animation-delay: .5s;
}
.editor-textarea:not(:focus) ~ .editor-caret-layer .editor-caret {
  display: none;
}
.editor-selection {
  border-radius: 2px;
}
.editor-selection:empty {
  display: none;
}


.editor-highlight .line {
  display: flex;
  border-radius: 2px;
}
.editor-highlight .line:not(.current) {
  transition: .1s background, .1s box-shadow;
}
.editor-highlight .line.current::before {
  content: "➡";
  position: relative;
  left: -.33em;
  font-weight: bold;
  font-size: 2em;
  width: 0;
}
.editor-highlight .lineno {
  flex: 0 0 3.5ch;
  padding-right: .5ch;
  margin-right: .5ch;
  border-right: 1px solid #ddd;
  text-align: right;
  color: grey;
}