/**
 * ProseMirror base styles (copied from prosemirror-view/style/prosemirror.css).
 *
 * Keep this in the design system so the editor always gets required baseline
 * rules like white-space: pre-wrap, and to avoid console warnings if the
 * upstream CSS import is removed elsewhere.
 */

@layer cinder.components {
  .ProseMirror {
    position: relative;
  }

  .ProseMirror {
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: break-spaces;
    -webkit-font-variant-ligatures: none;
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
  }

  .ProseMirror pre {
    white-space: pre-wrap;
  }

  .ProseMirror li {
    position: relative;
  }

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

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

  .ProseMirror-hideselection {
    caret-color: transparent;
  }

  /* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
  .ProseMirror [draggable][contenteditable='false'] {
    user-select: text;
  }

  /* Selected-node styling, not keyboard focus. Keep the geometry distinct from
     the shared focus ring while using a theme token instead of an upstream literal. */
  .ProseMirror-selectednode {
    outline: 2px solid var(--cinder-accent-solid);
  }

  /* Make sure li selections wrap around markers */
  li.ProseMirror-selectednode {
    outline: none;
  }

  li.ProseMirror-selectednode:after {
    content: '';
    position: absolute;
    left: -32px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    border: 2px solid var(--cinder-accent-solid);
    pointer-events: none;
  }

  /* Protect against generic img rules */
  img.ProseMirror-separator {
    display: inline !important;
    border: none !important;
    margin: 0 !important;
  }

  /* Template placeholder invalid token decoration (DEP-583). The wavy line is
     the non-color cue; the diagnostics summary carries the text. */
  .markdown-editor .template-placeholder-invalid {
    text-decoration: wavy underline var(--cinder-status-warning-solid);
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
  }

  /* Template completion popup (DEP-583, COR-526). The editor sets an exact
     eight-row max-height at runtime; this is the fallback. */
  .markdown-editor .template-completion-popup {
    background: var(--cinder-surface-raised);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md, 6px);
    box-shadow: var(--cinder-shadow-md);
    max-height: 20rem;
    overflow-y: auto;
    min-width: 200px;
    max-width: 360px;
    padding: var(--cinder-space-1, 4px);
  }

  /* Source mode's listbox (COR-521) renders in the top layer with Cinder's
     floating surface; it shares the rich listbox's width and row styles. */
  .markdown-editor-source-completion {
    min-width: 200px;
    max-width: 360px;
  }

  :is(.markdown-editor, .markdown-editor-source-completion) .template-completion-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--cinder-space-1, 4px) var(--cinder-space-2, 8px);
    border-radius: var(--cinder-radius-sm, 4px);
    cursor: pointer;
    font-size: var(--cinder-text-sm, 0.875rem);
    line-height: 1.4;
  }

  :is(.markdown-editor, .markdown-editor-source-completion) .template-completion-item--active {
    background: var(--cinder-surface-hover);
  }

  @media (hover: hover) {
    :is(.markdown-editor, .markdown-editor-source-completion) .template-completion-item:hover {
      background: var(--cinder-surface-hover);
    }
  }

  @media (forced-colors: active) {
    :is(.markdown-editor, .markdown-editor-source-completion) .template-completion-item--active {
      outline: 2px solid Highlight;
    }
  }

  :is(.markdown-editor, .markdown-editor-source-completion) .template-completion-item-path {
    font-family: var(--cinder-font-mono);
    font-weight: var(--cinder-font-medium);
    color: var(--cinder-text-default);
  }

  :is(.markdown-editor, .markdown-editor-source-completion) .template-completion-item-types,
  :is(.markdown-editor, .markdown-editor-source-completion) .template-completion-item-description {
    font-size: var(--cinder-text-xs, 0.75rem);
    color: var(--cinder-text-muted);
  }
}