.note-editor {
  display: flex;
  flex-direction: column;
}

.note-editor--body {
  flex: 1 1 40vh;
  position: relative;
  display: flex;
  align-items: stretch;
}

.note-editor--body .react-codemirror2,
.note-editor--preview {
  position: absolute;
  width: calc(50% - #{$ix-marg-a});
  height: 100%;
}

.note-editor--body .react-codemirror2 {
  left: 0;
}

.note-editor--preview {
  right: 0;
  background-color: $g3-castle;
  border-width: $ix-border;
  border-style: solid;
  border-radius: $ix-radius;
  border-color: $g4-onyx;
}

.note-editor--preview-scroll {
  position: absolute !important;
}

.note-editor--markdown-container {
  padding: $ix-marg-c;
}

.note-editor--controls {
  margin-bottom: $ix-marg-c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-editor--radio {
  width: 220px;
}

.note-editor--helper {
  font-size: $form-md-font;
  font-weight: 600;
  color: $g11-sidewalk;
}
