/************************************************************/
/* WYSIWYG: imitation in Edit mode */
/************************************************************/
/* Source: Piotr, ishgunacar, pihentagy, others on the forum
/************************************************************/
/* Editor font: make thicker so it is like in Preview
/* Remove markdown clutter
/* Unordered lists: turn into bullets as you type, as per Typora
/* Blockquote in edit mode with left border rendered instead of ">"
/* Tag pills in edit mode
/* Coloured headings for editor and preview, same font-weight in Edit & Preview
/* Horizontal line in edit mode. Changes --- to full-width line.
/* Checkboxes instead of brackets in edit mode

/* Note: change colours to your own taste *?

/* ============================================================================*/

/* For Edit mode use same font and font size as for Preview mode */

/* Editor font: make thicker so it is like in Preview */
.cm-s-obsidian .CodeMirror-line * {
    -webkit-font-smoothing: auto;
  }
  
  /* Remove markdown clutter */
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting,
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-string.cm-url,
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link,
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link),
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-comment,
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-barelink,
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag {
      display: none !important;
  } 
  
  /* except numbered list */
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list {
     display: inline !important;
  }
  
  /* except list markers */ span.cm-formatting-list,
  /*code block backticks */ span.cm-formatting-code-block.cm-hmd-codeblock,
  /* optionally header hashes */ /*span.cm-formatting-header
  { display: inline !important; }
  
  /* and task checkboxes */
  span.cm-formatting-task { display: inline !important; font-family: monospace; }
  
  /* highlight (==) not visible anymore if not active line */
  div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
   font-size: 0;
  }
  
  /* Unordered lists: turn into bullets as you type, as per Typora */
  span.cm-formatting-list-ul {
    visibility: hidden !important;
   }
    
   span.cm-formatting-list-ul:after {
    content: '• ';
    margin-left: -12px;
    color: var(--text-normal);
    visibility: visible !important;
   }
  
  /* Blockquote: in edit mode with left border rendered instead of > */
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting.cm-formatting-quote,
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-indent-in-quote {
    display: inline !important;
    color: transparent !important;
  }
  
  div:not(.CodeMirror-activeline)>.HyperMD-quote {
      background-color:rgb(238, 234, 234);
      border-left: 3px solid var(--text-selection);
      border-color: red !important; 
      border-radius: 0 8px 8px 0;
      font-size: 17px;
      line-height: 1.5em;
      margin-left: 5px;
      padding: 12px 10px 15px 8.5px;
      display: inline-block;
  }
  
  /* Tag pills in edit mode */
  div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
    content: '';
  }
  .tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
  background-color: rgba(123, 108, 214); /* wasvar(--text-accent); */
  border: none;
  color: white !important;
  font-size: 14px;
  padding: 0px 8px;
  padding-top: -2px;
  padding-bottom: 3px;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  margin: 1px 1px;
  cursor: pointer;
  border-radius: 14px;
  }
  .tag:hover {
  color: white;
  background-color: var(--text-accent-hover);
  }
  
  /* Coloured headings for editor and preview, same font-weight in Edit & Preview */
  .cm-s-obsidian .cm-header-1,
   .markdown-preview-view h1 {
    font-weight: 450;
    color: rgb(123, 108, 214); /* was(115, 98, 205); */
  }
  
  .cm-s-obsidian .cm-header-2,
   .markdown-preview-view h2 {
    font-weight: 450;
    color: rgb(123, 108, 214);
  }
  
  .cm-s-obsidian .cm-header-3,
   .markdown-preview-view h3 {
    font-weight: 450;
    color: rgb(123, 108, 214);
  }
  
  .cm-s-obsidian .cm-header-4,
   .markdown-preview-view h4 {
    font-weight: 450;
    color: rgb(123, 108, 214);
  }
  
  .cm-s-obsidian .cm-header-5,
   .markdown-preview-view h5 {
    font-weight: 450;
    color: rgb(123, 108, 214);
  }
  
  .cm-s-obsidian .cm-header-6,
   .markdown-preview-view h6 {
    font-weight: 450;
    color: rgb(123, 108, 214);
  }

/* Horizontal line in edit mode. Changes --- to full-width line */
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr {
    color: transparent;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: var(--text-selection);
    left: 0;
    top: 50%;
}

/* Checkboxes instead of brackets in edit mode */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-meta,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property {
    color: transparent;
    position: relative;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-meta:after,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property:after {
    content: "☐";
    position: absolute;
    top: 0px;
    left: 0px;
    color: var(--text-normal);
    font-size: 28px;
}