/* Typography comes from `.lotics-markdown` (markdown.css); this covers the editing surface and
   ProseMirror. */

/* The toolbar is a sibling above. A softer radius than a control's: a sheet of writing, not a field. */
.md-editor {
  border: 1px solid rgba(228, 228, 231, 1);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  /* The editable fills the line budget so a click anywhere focuses it. The budget is a floor: lines × the
     input rung's leading at this width plus padding (`constitution.md` §10). */
  display: flex;
  flex-direction: column;
  min-height: calc(var(--lotics-input-leading) * var(--lotics-markdown-editor-lines) + 16px);
}

/* Hover moves the border, focus adds the ring. Literal rgba mirroring `--lotics-border-hover` and
   `--ring`, since this plain CSS has no tokens. */
.md-editor:hover {
  border-color: rgba(113, 113, 122, 1);
}

.md-editor:focus-within {
  box-shadow: 0 0 0 2px rgba(24, 24, 27, 1);
}

.md-editor[data-disabled="true"] {
  opacity: 0.6;
}

/* Named explicitly, since `document` reaches the DOM too and a bare `[data-surface]` would catch it. */
/* A field's prose is a boxed value: its `sm` rung re-pointed at the input's, as every picker's box is — 16 on a
   phone, where Safari zooms a focused 14. */
.md-editor[data-surface="field"] {
  border-radius: 10px;
  --lotics-text-sm: var(--lotics-input-text);
  --lotics-leading-sm: var(--lotics-input-leading);
  --lotics-leading-tight-sm: var(--lotics-input-leading-tight);
  --lotics-tracking-sm: var(--lotics-input-tracking);
}

.md-editor[data-surface="field"] > .md-editor-content {
  padding-left: 8px;
  padding-right: 8px;
}

/* `CONTROL_RADIUS` (10) and `CONTROL_TEXT_INSET` (9), which put the prose on the plain field's x. */

/* The host paints the surface. `border-width: 0`, since a transparent border still occupies its pixel. */
.md-editor[data-seamless] {
  border-width: 0;
  background-color: transparent;
}

.md-editor[data-seamless]:focus-within {
  box-shadow: none;
}

.md-editor-content {
  flex: 1 1 auto;
  /* Anchors the gap cursor. */
  position: relative;
  padding: 8px 12px;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.md-editor-content .ProseMirror-selectednode {
  outline: 2px solid rgba(59, 130, 246, 0.6);
}

.md-editor-content > :first-child {
  padding-top: 0;
  margin-top: 0;
}

.md-editor-content > :last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Empty-document placeholder */

.md-editor-placeholder::before {
  content: attr(data-placeholder);
  color: rgba(161, 161, 170, 1);
  pointer-events: none;
  height: 0;
  float: left;
}

/* ProseMirror selection / gap cursor */

.ProseMirror[contenteditable="false"] {
  cursor: default;
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}

.ProseMirror-gapcursor::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid rgba(24, 24, 27, 1);
  animation: md-editor-blink 1.1s steps(2, start) infinite;
}

@keyframes md-editor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

/* Table editing (prosemirror-tables) */

.md-editor-content .tableWrapper {
  overflow-x: auto;
  margin: 4px 0;
}

.md-editor-content td,
.md-editor-content th {
  position: relative;
}

.md-editor-content .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.16);
  pointer-events: none;
  z-index: 2;
}

.md-editor-content .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: rgba(59, 130, 246, 1);
  pointer-events: none;
  z-index: 3;
}

.md-editor-content.resize-cursor {
  cursor: col-resize;
}