/* CSS overriding for prism.css and markdown.css */

#markdown {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: none;
    overflow-x: hidden;
}

#content {
    padding-block-end: 1em;
}

.mainContentWrapper {
    flex: 1 1 auto;
    margin-inline-start: auto;
    padding-inline-start: 12px;
    width: 100%;
    min-width: 0;
    max-width: 48rem;
}


/* Neutralize prism.css styles */
pre[class*="language-"],
code[class*="language-"] {
    font-size: 1em;
    text-shadow: none;
}

/* Common for all code strings */
pre > code, code,
pre[class*=language-] > code[class*=language-] {
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: .875em;
}

/* Neutralize markdown.css styles*/
pre, code {
    background-color: unset;
}

/* Inline code styles */
:not(pre) > code {
    padding: .1em .3em;
    border-radius: .3em;
    background: #eff1f3;
}

/* Code blocks without highlighting */
pre {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
    background: #f6f8fa;
}

p {
    text-align: unset;
}

/* CSS for JS Registry browsing */
input.bundle-search {
    padding: 8px 6px;
    font-size: 1rem;
    margin-bottom: .8rem;
}

.bundle-search + .bundle-list{
    padding-left: .25rem;
    list-style: none;
}

.bundle-list li {
    margin-bottom: 4px;
}

.externalLink::after {
    content: " ↗"
}

/* Gerade Schlange */
.tocWrapper {
    flex: 0 0 220px;
    padding-inline-start: 3em;
    padding-inline-end: 2em;
    margin-right: auto;
    font-size: .85rem;

    .toc {
        position: fixed;
        top: 66px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    h4 {
        padding-bottom: 1em;
        margin-top: 0;
    }
    ul.level_2 > li > a {
        padding-left: .5em;
    }
    ul.level_3 > li > a {
        padding-left: 1.5em;
    }
    ul.level_4 > li > a {
        padding-left: 2em;
    }
    a {
        display: inline-block;
        color: #5d5d5d;
        text-decoration: none;
    }
    li > a {
        padding-bottom: 0.6rem;
        transition: all 0.1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
        border-left: 2px solid #e1e1e1
    }
    li.visible > a {
        border-left-color:  #418fde;
    }
    a:hover, li a:focus {
        color: #0969ee;
    }
    a.title {
        font-weight: bold;
    }
}

#markdown:not(:has(.tocWrapper)) .mainContentWrapper {
    padding-left: 12px;
}
#markdown:not(:has(.tocWrapper)):after {
    /* fake toc-wrapper to prevent jumping when it is loaded and empty */
    content: '';
    flex: 0 0 220px;
    padding-inline-start: 3em;
    padding-inline-end: 2em;
    margin-right: auto;
}

@media screen and (max-width: 680px) {
    .tocWrapper,
    #markdown:not(:has(.tocWrapper)):after {
        display: none;
    }
}