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

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

.CodeMirror {
    span.hmd-hidden-token {
        &.cm-formatting-em,
        &.cm-formatting-strong,
        &.cm-formatting-strikethrough,
        &.cm-formatting-code,
        &.cm-formatting-link {
            @extend %hidden-token;
        }
    }

    /* adding some CodeMirror-not-implemented styles' default style */
    .cm-inline-code,
    .cm-math {
        color: #900;
    }

    /* 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;
    }
}