#blog-wrapper {

    display: flex;
    flex-direction: row;

    margin: 1em;

    #sidebar-left {

        width: 10vw;
        overflow: auto;
        border-right: 1px solid light-dark(black, white);

        ul {
            padding-left: 1.5em;
        }

        li.tagList-tagDir {
            &::marker {
                content: "📁\fe0e ";
            }
        }

        li.tagList-tag {
            &::marker {
                content: "🏷️\fe0e ";
            }
        }

    }

    span[contenteditable] {
        min-width: 10em;
        display: inline-block;
        outline: 1px solid light-dark(black, white);
    }

    #blog-editor-preview {
        display: flex;

        & > div {
            width: 40%;
            height: 50em;
            margin: 1ex;
        }

        #content {
            width: 100%;
            height: 50em;
        }

        #blog-content {
            overflow: scroll;
        }
    }

    main {
        flex-grow: 1;

        hgroup {
            h1 {
                margin-bottom: 0;
            }

            p {
                font-size: smaller;
                margin-top: 1ex;
            }
        }

        #blog-data p {
            margin: 1ex;
            font-size: small;
            text-align: right;
        }
    }

    #title {
        width: 100%;
    }

    #descp {
        width: 100%;
    }

    #searchForm {
        outline: 1px solid light-dark(black, white);
    }

    #contentSearch {
        width: 75%;
    }

    article.searchResult {
        outline: 1px solid light-dark(black, white);
        padding: 1ex;
    }

    .pagesLinks {

        display: flex;

        & > div {
            padding: 1ex;
            border: 1px solid light-dark(black, white);
            margin: 1ex;
            height: 1em;
            width: 1em;
            text-align: center;
            line-height: 1em;
        }
    }

}

#blog-content {
    .blog-toc {
        background-color: light-dark(lightgray, dimgray);
        border: 1px solid light-dark(dimgray, lightgray);
        display: inline-block;
        padding: 1ex;

        ol {
            padding-left: 2em;
        }

        /* https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/counters */
        ol {
            counter-reset: toc;
            list-style-type: none;
        }

        li::marker {
            counter-increment: toc;
            content: counters(toc, ".") ". ";
        }

        a {
            color: light-dark(blue, lightcyan);
        }
    }

    h2, h3, h4, h5, h6 {
        border-left: 1ex solid light-dark(black, white);
        padding-left: 1ex;
        border-bottom: 1px solid light-dark(black, white);
        padding-bottom: 0.5ex;
    }

    h2:not(.blog-toc h2) {
        counter-reset: h3 h4 h5 h6;
        counter-increment: h2;

        &::before {
            content: counter(h2) ". ";
        }
    }

    h3:not(.blog-toc h3) {
        counter-reset: h4 h5 h6;
        counter-increment: h3;

        &::before {
            content: counter(h2) "." counter(h3) ". ";
        }
    }

    h4:not(.blog-toc h4) {
        counter-reset: h5 h6;
        counter-increment: h4;

        &::before {
            content: counter(h2) "." counter(h3) "." counter(h4) ". ";
        }
    }

    h5:not(.blog-toc h5) {
        counter-reset: h6;
        counter-increment: h5;

        &::before {
            content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
        }
    }

    h6:not(.blog-toc h6) {
        counter-increment: h6;

        &::before {
            content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
        }
    }


    :not(pre) code, pre {
        border: 1px solid light-dark(dimgray, lightgray);
        background-color: #202020;
        color: white;
    }

    :not(pre) code {
        border-radius: 0.5ex;
        padding: 0.2ex 0.5ex 0.2ex 0.5ex;
        line-height: 2;
    }

    pre {
        padding: 0.5ex;
    }

    blockquote {
        border-left: 1ex solid skyblue;
        padding-left: 1ex;
    }

    aside {
        font-size: smaller;
        font-style: italic;
        opacity: 0.75;
    }

    .footnotes li p {
        display: inline;
    }

    .x-align-left {
        text-align: left;
    }

    .x-align-center {
        text-align: center;
    }

    .x-align-right {
        text-align: right;
    }

    .x-citation-needed-span {
        text-decoration: underline dotted 2px;
        text-underline-offset: 0.5ex;
    }

    .x-color-red {
        color: red;
    }

    .x-color-green {
        color: light-dark(green, lime);
    }

    .x-color-blue {
        color: light-dark(blue, cyan);
    }

    .x-color-invert {
        color: light-dark(white, black);
        background-color: light-dark(black, white);
    }

    .x-size-small {
        font-size: small;
    }

    .x-size-large {
        font-size: large;
    }

    .x-size-x-large {
        font-size: x-large;
    }

    .x-size-xx-large {
        font-size: xx-large;
    }

    .x-size-xxx-large {
        font-size: xxx-large;
    }

    [class^="x-writing-mode-"] {
        text-orientation: upright;
    }

    .x-writing-mode-horizontal-tb {
        writing-mode: horizontal-tb;
    }

    .x-writing-mode-vertical-lr {
        writing-mode: vertical-lr;
    }

    .x-writing-mode-vertical-rl {
        writing-mode: vertical-rl;
    }

    .x-writing-mode-sideways-lr {
        writing-mode: sideways-lr;
    }

    .x-writing-mode-sideways-rl {
        writing-mode: sideways-rl;
    }

    .x-upright {
        text-combine-upright: all;
    }
}