/*
*   Abricotine - Markdown Editor
*   Copyright (c) 2015 Thomas Brouard
*   Licensed under GNU-GPLv3 <http://www.gnu.org/licenses/gpl.html>
*/

// CodeMirror
// =========

    .CodeMirror {
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        display: block;
        margin: 0 auto;
        border: none;
        font-family: @editor-font-family;
        font-size: 100%;
        line-height: 170%;
        background-color: @editor-background-color;
        color: @editor-text-color;
    }

    .ruler {
        font-size: 100%;
        font-size: 16px;
        font-family: @editor-font-family;
        line-height: 170%;
        text-indent: 0px;
    }

    // https://codemirror.net/demo/indentwrap.html
    .CodeMirror pre > * {
        text-indent: 0px;
    }

    .CodeMirror pre when (@editor-ligatures = true) {
        font-variant-ligatures: contextual;
    }

    .CodeMirror-code {
        margin-top: 50px;
        margin-bottom: 50%;
    }

    .CodeMirror-sizer {
        width: 90%;
        max-width: 900px;
        margin: 0 auto !important;
    }

// Cursors and selections
// ======================

    .CodeMirror-cursors div.CodeMirror-cursor {
        border-left-width: @editor-cursor-width;
        border-left-color: @editor-cursor-color;
    }

    .CodeMirror-cursors.CodeMirror-overwrite div.CodeMirror-cursor {
        border-left: none;
        border-bottom: @editor-cursor-width solid @editor-cursor-color;
        width: 1.2ex;
    }

    .CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected {
        .editor-selection();
    }

    .cm-searching {
        .editor-searching();
    }

    .link-clickable {
        .cm-link:not(.cm-formatting),
        .cm-url:not(.cm-formatting) {
            cursor: pointer
        }
    }

// Generic editor classes
// ======================

    .cm-header {font-weight: bold;}
    .cm-strong {font-weight: bold;}
    .cm-em {font-style: italic;}
    .cm-link {text-decoration: underline;}
    .cm-strikethrough {text-decoration: line-through;}
    .cm-error {color: @error-color;}
    .cm-invalidchar {color: @error-color;}

// Text
// ====

    span.cm-m-markdown, span.cm-m-null {
        font-family: @editor-font-family;

        // Header
        &.cm-header {
            .editor-headers();
        }
        &.cm-header-1 { line-height: 100%; .editor-header-1(); }
        &.cm-header-2 { .editor-header-2(); }
        &.cm-header-3 { .editor-header-3(); }
        &.cm-header-4 { .editor-header-4(); }
        &.cm-header-5 { .editor-header-5(); }
        &.cm-header-6 { .editor-header-6(); }

        // Code
        &.cm-comment {
            font-family: @editor-code-font-family;
            .editor-code();
        }

        // Quote
        &.cm-quote { .editor-quote(); }

        // Lists (3 levels)
        &.cm-list {
            .editor-list();

            &:first-child {
                padding-left: @editor-list-padding-left;
            }

            &+& {
                padding-left: 0
            }
        }

        // Horizontal rule
        &.cm-hr { .editor-hr(); }

        // Image
        &.cm-tag { .editor-image(); }

        // Link
        &.cm-link { .editor-link(); }

        // Link href
        &.cm-string { .editor-link-href(); }

        // Emphasis
        &.cm-em { .editor-em(); }

        // Strong
        &.cm-strong { .editor-strong(); }

        // Strikethrough
        &.cm-strikethrough { .editor-strikethrough(); }

    }

    // Underline-style headers fix
    .header-underline .cm-header-1, .header-underline .cm-header-2 { font-size: 100%; }

    // Formatting
    .cm-formatting, .cm-formatting-math {
      font-family: @editor-font-family;
      color: @editor-formatting-color;
    }
    span.cm-m-markdown.cm-formatting-header, span.cm-m-null.cm-formatting-header {
      color: @editor-formatting-color;
      font-weight: normal;
    }
    span.cm-formatting.cm-formatting-code-block {
      font-family: @editor-font-family;
      color: @editor-formatting-color;
      font-size: 80%;
    }

// Code coloration
// ===============

    .CodeMirror-lines span:not(.cm-m-markdown):not(.cm-m-null):not(.cm-formatting) {
        font-family: @editor-code-font-family;

        &.cm-atom {color: @cm-atom-color;}
        &.cm-attribute {color: @cm-attribute-color;}
        &.cm-builtin {color: @cm-builtin-color;}
        &.cm-bracket {color: @cm-bracket-color;}
        &.cm-comment {color: @cm-comment-color;}
        &.cm-def {color: @cm-def-color;}
        &.cm-header {color: @cm-header-color;}
        &.cm-hr {color: @cm-hr-color;}
        &.cm-keyword {color: @cm-keyword-color;}
        &.cm-link {color: @cm-link-color;}
        &.cm-meta {color: @cm-meta-color;}
        &.cm-node {color: @cm-node-color;}
        &.cm-number {color: @cm-number-color;}
        &.cm-operator {color: @cm-operator-color;}
        &.cm-property {color: @cm-property-color;}
        &.cm-punctuation {color: @cm-punctuation-color;}
        &.cm-qualifier {color: @cm-qualifier-color;}
        &.cm-quote {color: @cm-quote-color;}
        &.cm-string {color: @cm-string-color;}
        &.cm-string-2 {color: @cm-string-2-color;}
        &.cm-tag {color: @cm-tag-color;}
        &.cm-variable {color: @cm-variable-color;}
        &.cm-variable-2 {color: @cm-variable-2-color;}
        &.cm-variable-3 {color: @cm-variable-3-color;}
        &.cm-negative {color: @cm-negative-color;}
        &.cm-positive {color: @cm-positive-color;}
    }

// Hidden characters
// =================

    // Line breaks
    body.show-hidden-characters .cm-m-markdown .cm-trailing-whitespace,
    body.show-hidden-characters .cm-m-markdown.cm-trailing-whitespace,
    body.show-hidden-characters .cm-m-null .cm-trailing-whitespace,
    body.show-hidden-characters .cm-m-null.cm-trailing-whitespace
    {
        &:last-child:after {
            content: '↵';
            color: @editor-hidden-characters-color;
            font-family: @editor-font-family;
            font-weight: normal;
            font-style: normal;
        }
    }

    // Tabs
    body.show-hidden-characters .cm-m-markdown .cm-tab,
    body.show-hidden-characters .cm-m-markdown.cm-tab,
    body.show-hidden-characters .cm-m-null .cm-tab,
    body.show-hidden-characters .cm-m-null.cm-tab
    {
        font-family: @editor-font-family;
        position: relative;
        &:after {
            content: '⇥';
            color: @editor-hidden-characters-color;
            font-family: @editor-font-family;
            font-weight: normal;
            font-style: normal;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            text-align: center;
        }
    }

// Markers
// =======

    // Image
    .CodeMirror-widget .autopreview-image, .CodeMirror-widget .autopreview-iframe {
        max-width: 100%;
        max-height: 800px;
        cursor: default;
    }

    .CodeMirror-widget .autopreview-iframe {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 0;
        border: 1px solid #333;
        background: #333 data-uri("image/svg+xml;charset=UTF-8", "./svg/spinner.svg") no-repeat center;
    }

    .CodeMirror-widget .autopreview-iframe webview {
        position: absolute;
        width: 100%;
        height: 100%;
        left: -200%;
        top: 0;
    }

    .CodeMirror-widget .autopreview-iframe.iframe-loaded {
        background: none;
    }

    .CodeMirror-widget .autopreview-iframe.iframe-error {
        background: @error-color data-uri("image/svg+xml;charset=UTF-8", "./svg/chain-broken.svg") no-repeat center;
        color: @error-color-contrast;
        border: 1px solid @error-color;
    }

    .CodeMirror-widget .autopreview-iframe.iframe-loaded webview {
        left: 0;
    }

    // Image not found message
    .CodeMirror-widget .autopreview-image.image-error {
        display: inline-block;
        overflow: hidden;
        position: relative;
        width: 80px;
        height: 80px;
        background: @error-color data-uri("image/svg+xml;charset=UTF-8", "./svg/chain-broken.svg") no-repeat center;
        color: @error-color-contrast;
        border: 1px solid @error-color;
    }

    // Anchors
    .anchor {
        color: @editor-hidden-characters-color;
        cursor: default;
    }

    // Mathjax hack
    .CodeMirror-widget div.MathJax_Display {
        margin-top: -1em;
        margin-bottom: -1em;
    }

    // Mathjax errors
    mjx-merror {
        font-family: "Fira Code", Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;
        background: none !important;
    }

    // Todolists
    span.todolist {
        background: transparent no-repeat center center;
        cursor: pointer;
        &:before {
            font-family: FontAwesome;
            content: "\f096"; // .fa-square-o
            display: inline-block;
            width: 30px;
        }
    }

    span.todolist.checked {
        .cm-list {
            color:  @editor-list-checked-color;
        }
        &:before {
            color: @editor-list-checked-color;
            content: "\f046"; // .fa-check-square-o
        }
    }

    .cm-checked-list-item {
        text-decoration: line-through;
        color: @editor-list-checked-color;

        &.cm-trailing-whitespace, &.cm-property, &.cm-list:first-child {
            text-decoration: none;
            color: @editor-list-checked-color;
        }

        & > .cm-list {
            color: @editor-list-checked-color;
        }
    }

// Show blocks option
// ==================

    .CodeMirror-wrap pre {
        padding-left: 20px;
    }

    body.show-blocks pre.not-blank {
        border-left: @editor-block-margin-size solid @editor-block-margin-color;
    }

// Last line indicator
// ===================

    body.show-last-line-indicator .CodeMirror-code {
        border-bottom: 1px dotted @editor-block-margin-color;
    }


// Spellchecker
// ============

    span.cm-m-markdown.cm-spell-error,
    span.cm-m-null.cm-spell-error {
        &:not(.cm-string):not(.cm-link):not(.cm-formatting):not(.cm-tag):not(.cm-hr):not(.cm-comment) {
            display: inline-block;
            position:relative;
            background: data-uri("image/svg+xml;charset=UTF-8", "./svg/spellcheck-underline.svg") left bottom repeat-x;
        }
    }
