.cell_editor {
  position: absolute;
  z-index: 1000;        /* make it higher than popper's 999 */
  display: flex;
}

.default_editor {
  box-shadow: 0 0 3px 2px var(--grist-theme-cursor, var(--grist-color-cursor));
}

.readonly_editor {
  box-shadow: 0 0 3px 2px var(--grist-theme-cursor-readonly, var(--grist-color-slate));
}

/* make room for lock icon */
.readonly_editor .celleditor_cursor_editor .celleditor_text_editor,
.readonly_editor .celleditor_cursor_editor .celleditor_content_measure {
  padding-left: 18px;
}

.readonly_editor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin: 4px 3px 0 3px;
  width: 13px;
  height: 13px;
  background-color: #D0D0D0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-image: var(--icon-Lock);
}

.formula_editor_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Make overflow hidden, since editor might be 1 pixel bigger due to fix for devices
 * with different pixel ratio */
.formula_editor {
  background-color: var(--grist-theme-ace-editor-bg, white);
  padding: 4px 4px 2px 21px;
  z-index: 10;
  overflow: hidden;
  flex: none;
  min-height: 22px;   /* this is the usual height, but helps slightly when font is shorter than expected */
}

/* styles specific to the formula editor in the side panel */
.default_editor.formula_editor_sidepane {
  border-radius: 3px;
}
.formula_editor_sidepane > .formula_editor {
  padding: 5px 0 5px 24px;
  border-radius: 3px;
}
.formula_editor_sidepane > .formula_field_edit::before, .formula_field_sidepane::before {
  left: 4px;
}

.celleditor_cursor_editor {
  background-color: var(--grist-theme-cell-editor-bg, white);

  /* the following are copied from .field_clip */
  padding: 3px 3px 0px 3px;
  font-family: var(--grist-font-family-data);
  font-size: var(--grist-medium-font-size);
  line-height: 18px;
  min-height: 21px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.celleditor_text_editor {
  display: block;
  outline: none;
  padding: 0px;
  border: none;
  resize: none;
  z-index: 10;
  background-color: var(--grist-theme-cell-editor-bg, unset);
  color: var(--grist-theme-cell-editor-fg, black);

  /* Inherit styles, same as for .celleditor_content_measure, to ensure that sizes correspond. */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.celleditor_text_editor::placeholder {
  color: var(--grist-theme-cell-editor-placeholder-fg, unset);
}

.celleditor_content_measure {
  position: absolute;
  left: 0;
  top: 0;
  border: none;
  visibility: hidden;
  overflow: visible;
  /* with 'pre-wrap', this lets the editor gets as wide as needed before wrapping; */
  /* width is limited only by max-width (which is set in JS code). */
  width: max-content;

  /* Inherit styles, same as for .celleditor_text_editor, to ensure that sizes correspond. */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.error_msg {
  display: flex;
  background-color: #ffb6c1;
  padding: 4px;
  color: black;
  white-space: pre-wrap;
  flex: none;
  overflow: auto;
}

.error_details {
  background-color: #F8EAD5;  /* 20% of color-warning-bg */
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  flex: auto;
  overflow: auto;
  word-break: break-all;
}

.error_details_inner {
  padding: 2px 2px 2px 28px;
}

.kf_collapser {
  height: 1.2rem;
}