/*
This CSS file contains all style definitions for the global page layout.

When pdoc is embedded into other systems, it may be left out (or overwritten with an empty file) entirely.
 */

/* Responsive Layout */
html, body {
    width: 100%;
    height: 100%;
}

html, main {
    scroll-behavior: smooth;
}

body {
    background-color: var(--pdoc-background);
}

.main-body {
    padding: 0 1rem 1rem 0;
}

    :root {
        /* --sidebar-width: clamp(12.5rem, 28vw, 22rem); */
        --sidebar-width: clamp(15rem, 15rem, 15rem);
    }

    nav {
        position: fixed;
        overflow: auto;
        height: 100vh;
        width: calc(var(--sidebar-width) + 2rem);
    }

    main {
        margin-left: calc(var(--sidebar-width) + 2rem);
        /* width: calc(60rem + var(--sidebar-width)); */
        max-width: 100%;
    }

    header + main {
        margin-top: -4rem;
    }

    #navtoggle {
        display: none;
    }

#togglestate {
    /*
    Don't do `display: none` here.
    When a mobile browser is not scrolled all the way to the top,
    clicking the label would insert the menu above the scrolling position
    and it would stay out of view. By making the checkbox technically
    visible it jumps up first and we always get the menu into view when clicked.
    */
    position: absolute;
    height: 0;
    /* height:0 isn't enough in Firefox, so we hide it extra well */
    opacity: 0;
}

/* Nav */
nav.pdoc {
    --pad: clamp(0.5rem, 1vw, 0.5rem);
    --indent: 1.5rem;
    background-color: var(--accent);
    border-right: 1px solid var(--accent2);
    box-shadow: 0 0 20px rgba(50, 50, 50, .2) inset;
    padding: 0 0 0 var(--pad);
    overflow-wrap: anywhere;
    scrollbar-width: thin; /* Scrollbar width on Firefox */
    scrollbar-color: var(--accent2) transparent; /* Scrollbar color on Firefox */
    z-index: 1;
    font-size: 0.9rem;
}

nav.pdoc::-webkit-scrollbar {
    width: .4rem; /* Scrollbar width on Chromium-based browsers */
}

nav.pdoc::-webkit-scrollbar-thumb {
    background-color: var(--accent2); /* Scrollbar color on Chromium-based browsers */
}

nav.pdoc > div {
    padding: var(--pad) 0;
}

nav.pdoc .module-list-button {
    display: inline-flex;
    align-items: center;
    color: var(--text);
    border-color: var(--muted);
    margin-bottom: 1rem;
}

nav.pdoc .module-list-button:hover {
    border-color: var(--text);
}

nav.pdoc input[type=search] {
    display: block;
    outline-offset: 0;
    width: calc(100% - var(--pad));
}

nav.pdoc .logo {
    max-width: calc(100% - var(--pad));
    max-height: 35vh;
    display: block;
    margin: 0 auto 1rem;
    transform: translate(calc(-.5 * var(--pad)), 0);
}

nav.pdoc ul {
    list-style: none;
    padding-left: 0;
}

nav.pdoc > div > ul {
    /* undo padding here so that links span entire width */
    margin-left: calc(0px - var(--pad));
}

nav.pdoc li a {
    /* re-add padding (+indent) here */
    padding: .2rem 0 .2rem calc(var(--pad) + var(--indent));
}

nav.pdoc li .workshop-list-item {
    /* for normal pages, we don't have the class structure and don't need that much indentation */
    padding: 0 0 .2rem calc(var(--indent));
}

nav.pdoc > div > ul > li > a {
    /* no padding for top-level */
    padding-left: var(--pad);
}

nav.pdoc li {
    transition: all 100ms;
}

nav.pdoc li:hover {
    background-color: var(--nav-hover);
}

/*  commenting this out will preserver the pelican highlighting
nav.pdoc a, nav.pdoc a:hover {
    color: var(--text);
}
*/

nav.pdoc a {
    display: block;
}

nav.pdoc > h2:first-of-type {
    margin-top: 1.5rem;
}

nav.pdoc .class:before {
    content: "class ";
    color: var(--muted);
}

nav.pdoc .function:after {
    content: "()";
    color: var(--muted);
}

nav.pdoc footer:before {
    content: "";
    display: block;
    width: calc(100% - var(--pad));
    border-top: solid var(--accent2) 1px;
    margin-top: 1.5rem;
    padding-top: .5rem;
}

nav.pdoc footer {
    font-size: small;
}