/*
  rich text editor using ProseMirror

  container
  validation
  content
*/



@layer common-styling {

  /* container
  ============================================================================ */
  .pos-markdown {
      width: 100%;
      position: relative;
  }

  .EasyMDEContainer .editor-toolbar {
    height: var(--pos-height-input);
    padding-inline: var(--pos-padding-input);
    box-sizing: border-box;

    border-block-end-width: 0;
    border-start-start-radius: var(--pos-radius-input) !important;
    border-start-end-radius: var(--pos-radius-input) !important;
    border-style: solid;
    border-color: var(--pos-color-input-frame) !important;
    outline: none;
    background-color: var(--pos-color-input-background);
    
    text-align: start;
    color: var(--pos-color-input-text);
  }

  .EasyMDEContainer .CodeMirror {
    border-color: var(--pos-color-input-frame) !important;
    border-end-start-radius: var(--pos-radius-input) !important;
    border-end-end-radius: var(--pos-radius-input) !important;
  }

  .EasyMDEContainer .editor-preview-side {
    border-color: var(--pos-color-input-frame) !important;
  }

  .EasyMDEContainer .editor-preview {
    padding: var(--pos-padding-card);
    background-color: var(--pos-color-highlight-background) !important;
  }

  /* tailwind interferes with the .table button */
  .EasyMDEContainer .editor-toolbar button {
    width: auto;
  }

  /* focused state */
  .EasyMDEContainer:has(.CodeMirror-focused) {
    outline: 2px solid var(--pos-color-focused);
  }

  /* text color */
  .EasyMDEContainer:not(:has(.CodeMirror-focused)) .CodeMirror-code {
    color: var(--pos-color-input-text) !important;
  }


  /* validation
  ============================================================================ */
  .pos-markdown-error-disabled {
    display: none;
  }


  /* @mention popup
  ============================================================================ */
  .pos-markdown-mention [popover] {
    margin-inline-start: calc(var(--pos-radius-card) * -2);
    overflow: visible;

    /* absolute (document-relative), not fixed (viewport-relative): this lets the popup scroll
       with the page natively. Mobile Safari mishandles `position: fixed` while the on-screen
       keyboard is open (panning the page can leave fixed elements behind or misplaced), so we
       anchor in document coordinates instead and let the browser carry it along on scroll. */
    position: absolute;
  }

  .pos-markdown-mention [popover]:after {
    width: 16px;
    height: 11px;
    position: absolute;
    top: -11px;
    inset-inline-start: calc(var(--pos-radius-card) * 2);

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: var(--pos-color-interactive);

    content: '';
  }

    @media (max-width: 600px) {
      .pos-markdown-mention [popover] {
        margin-inline-start: 0;
      }

      .pos-markdown-mention [popover]:after {
        inset-inline-start: calc(50% - 8px);
      }
    }

  .pos-markdown-mention menu li button {
    padding: .5rem .75rem;
  }

  .pos-markdown-mention menu li:first-child button {
    border-start-start-radius: var(--pos-radius-card);
    border-start-end-radius: var(--pos-radius-card);
  }

  .pos-markdown-mention menu li:last-child button {
    border-end-start-radius: var(--pos-radius-card);
    border-end-end-radius: var(--pos-radius-card);
  }

  /* @mention mark inside the editor */
  .EasyMDEContainer .CodeMirror .pos-markdown-mention-mark {
    font-weight: 600 !important;
    color: var(--pos-color-interactive-active) !important;
    text-decoration: none !important;
  }


  /* content
  ============================================================================ */
  .EasyMDEContainer .CodeMirror-code [data-img-src]::after {
    width: auto !important;
    max-height: 50vh !important;
    padding-top: min(var(--height), 35vh) !important;
  }

}