%inline-block {
    display: inline-block;
    vertical-align: middle;
}

%hidden-token {
    display: inline;
    font-size: 1px !important;
    letter-spacing: -1ch;
    font-family: monospace;
    color: transparent;
}

:root {
    --bullet-list-color: #232323;
}

@media (prefers-color-scheme: dark) {
:root {
  --bullet-list-color: #e1e1e1;
}
}

@media (prefers-color-scheme: light) {
  :root {
    --bullet-list-color: #232323;
  }
}

.CodeMirror {
    span.hmd-hidden-token {

        &.cm-formatting-em,
        &.cm-formatting-strong,
        &.cm-formatting-strikethrough,
        &.cm-formatting-code,
        &.cm-formatting-link,
        &.cm-customlink,
        &.cm-highlightText, 
        &.cm-subscript,
        &.cm-superscript,
        &.cm-underline 
        {
            @extend %hidden-token;
        }
    }
    span.cm-hmd-highlightText-begin {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }
    span.cm-hmd-highlightText-end {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }


    /* adding some CodeMirror-not-implemented styles' default style */
    .cm-inline-code,
    .cm-math {
        color: #900;
    }
    .cm-subscript {
        font-size: 0.8em;
        vertical-align: sub;
    }
    .cm-superscript {
        font-size: 0.8em;
        vertical-align: super;
    }
    .cm-highlightText {
        text-indent: 0;
    }
    .cm-underline:not(.cm-formatting-underline) {
        text-decoration: underline;
    }

    /* tooltip for addon/hover */
    div.HyperMD-hover>.HyperMD-hover-content {
        background-color: #fff;
        color: #000;
        border: 1px solid #000;
        padding: .5em;

        p {
            margin: .2em 0;
        }
    }

    /* gutter for addon/click */
    .HyperMD-goback {
        width: 1px;
    }

    div.HyperMD-goback-button {
        background-color: #ddd;
        color: #333;
        text-align: center;
        cursor: pointer;
    }

    /* addon/fold */
    .hmd-link-icon:after {
        // Link Placeholder
        content: "🔗»";
        color: #009;
        text-shadow: 0 0 2px #69F;
    }

    /* addon/table-align */
    pre.HyperMD-table-row {
        white-space: pre; // disable wrapping

        .hmd-table-column,
        .hmd-table-column-content {
            display: inline-block;
        }

        .hmd-table-column-left {
            text-align: left
        }

        .hmd-table-column-center {
            text-align: center
        }

        .hmd-table-column-right {
            text-align: right
        }

        .cm-hmd-table-sep {
            @extend %inline-block;
        }
    }

    /* addon/fold-math */
    .hmd-fold-math {
        @extend %inline-block;

        &.hmd-fold-math.math-2 {
            // aka. display mode
            width: 100%;
        }
    }

    /* addon/fold-emoji */
    img.hmd-emoji {
        height: 1.2em;
        vertical-align: middle;
    }

    .cm-customlink {
        color: purple;
        position: relative;
    }

    // .cm-qf-hyperMD-list-line.cm-un-ordered-list:not(:has(span)),
    // .cm-qf-hyperMD-list-line.cm-un-ordered-list:has(span) + * {
    //     display: inline-block;
    // }
    // .cm-qf-hyperMD-list-line.cm-un-ordered-list,
    // .cm-formatting-list.cm-formatting-list-ul {
    //     color: #8C8C8C;
    //     letter-spacing: 2px;
    // }
    // .cm-qf-hyperMD-list-line.cm-un-ordered-list:not(:has(span)):last-child:before,
    // .cm-qf-hyperMD-list-line.cm-un-ordered-list:has(span) + span:last-child::before
    // .CodeMirror-line .cm-qf-hyperMD-list-line.cm-un-ordered-list:not(:has(span))::before
    .cm-qf-hyperMD-list-line.cm-un-ordered-list,
    .cm-formatting-list.cm-formatting-list-ul:not(:has(+ .cm-formatting-task)) {
        color: transparent;
    }

    .cm-qf-hyperMD-list-line.cm-un-ordered-list::before,
    .cm-formatting-list.cm-formatting-list-ul:not(:has(+ .cm-formatting-task))::before
    {
        content: '\2022';
        position: relative;
        left: 0;
        color: var(--bullet-list-color);
        font-size: 1.5em;
        left: 4px;
        top: 4px;
        line-height: 19px;
    }
    .CodeMirror-line .cm-qf-hyperMD-list-line.cm-un-ordered-list + span[class^="cm-list-"]::before {
        content: '';
    }
    .show-above {
        z-index: 9;
    }
    .hmd-fold-media-widget::after {
        content: '';
        display: block;
        clear: both;
    }
    .hmd-fold-media-widget {
        // margin-top: -25px;  // adjusting the space occupied by token where the widget is displayed
    }

    .do-not-show-token + pre {
        display: none;
        pointer-events: none;
        user-select: none;
    }
    .do-not-show-token ~ .CodeMirror-line {
        .cm-image, .cm-url {
            // display: none;
        }
    }

    /* When we wrap tokens in <span class="md-token">**</span> we want them hidden by default */
    .md-token {
        display: none;
        color: #999;
        opacity: 0.7;
    }

    .md-token {
        display: none;
        color: #888;
        opacity: 0.7;
    }
      
    .table-cell-wrapper:hover .md-token, 
    td .show-token .md-token,
    .force-display-token .md-token {
        display: inline;
    }
      

    /* We'll wrap each parsed segment in <span class="md-segment">...</span>.
    If the user places the caret (selection) inside .md-segment, reveal the tokens. */
    .md-segment:focus-within .md-token {
    display: inline;
    }

    /* To display the token on hover */
    .md-segment:hover .md-token {
        display: inline;
    }

    .hidden-table-line:has(.HyperMD-table-row) .CodeMirror-gutter-wrapper {
        display: none;
    } 


    .table-widget td, .table-widget th {
        white-space: pre-wrap; /* Ensures line breaks are visible */
    }

    &:not(.cm-s-default) .hidden-table-line:has(.HyperMD-table-row),
    .hidden-table-line {
        pre {
          display: none;
        }
        [class^="cm-list-"] {
            display: none;
        }
    }
    &:not(.cm-s-default) pre.HyperMD-table-row {
        display: none;
    }


    .cm-tab, .qf-fold-gutter {
        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; /* Note: if the font family changes then the spacing will change */
    }
    // .cm-tab-wrap-hack .cm-tab::before {border-right: none;}

    // .cm-qf-hyperMD-list-line.cm-un-ordered-list:not(:has(span))::first-letter,
    // .cm-qf-hyperMD-list-line.cm-un-ordered-list:has(span) + *::first-letter {
    //     color: transparent;
    // }
    .CodeMirror-measure + div {
        z-index: 9 !important;
        &:has(.CodeMirror-selected) {
            z-index: 10 !important
        }
    }
    span.cm-formatting-task {
        margin-left: 6px;
    }
    // span.cm-comment { opacity: 0.5; }

    .hmd-inactive-line:has(.youtube-token) {
        .youtube-token {
            display: none;
        }
    
    }
    .cm-formatting-link-string, 
    .cm-formatting-link-string + .cm-url {
        text-indent: 0;
        
    }
}

.cm-string.cm-url[class*="cm-list-"] {
    text-indent: 0;
  }

#table-context-menu {
    line-height: 1.5;
    & > div {
        &:not(:last-child) {
            border-bottom: solid 1px #F2F2F2;
        }
        &:hover {
            background-color: #F2F2F2;
        }
    }
}