.th-toc-pin {
    body {
        display: grid;
        grid-template-columns: auto 1fr;
        height: auto;
        gap: 1em;
    }
    #th-toc {
        position: sticky;
        order: -1;
        align-self: flex-start;
        left: auto !important;

        .th-toc-btn-pin {
            opacity: 1;
            color: #ff0;
            text-shadow: none;
            &::before {
                margin-left: 1px;
                margin-top: 1px;
            }
        }
        &::after {
            display: none;
        }
        > ul {
            overflow: visible;
        }
        ul {
            display: block !important;
        }
    }
}
// html {
//     scroll-behavior: smooth;
// }
#th-toc {
    --width: 27ch;
    --trigger-width: 1ch;
    position: fixed;
    box-sizing: border-box;
    left: calc(-1 * var(--width) + 0.25px);
    top: 0.5rem;
    bottom: 0.5rem;
    line-height: 0.9;
    background-color: hsl(0, 0%, 95%);
    color: black;
    padding: 0.5em 0.5ch;
    border-top-right-radius: var(--trigger-width);
    border-bottom-right-radius: var(--trigger-width);
    border: 3px solid hsl(0, 0%, 80%);
    border-left: none;
    border-width: 1px 3px;
    width: var(--width);
    transition: left 500ms;
    transition-timing-function: ease-in;
    transition-delay: 0ms;
    overflow: visible;
    .th-toc-btn-pin {
        position: absolute;
        z-index: 1000;
        right: 0.25ch;
        top: 0.25em;
        width: 1.3em;
        height: 1.3em;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #996;
        color: white;
        text-shadow: 1px 1px 2px black;
        border-radius: 100%;

        &::before {
            content: "push_pin";
            font-family: "Material Icons";
        }
    }
    .th-toc-no-heading::marker {
        content: "";
    }
    &:empty {
        display: none;
    }
    &:hover {
        // IN transition
        // transition: left 20ms;
        transition-delay: 500ms;
        transition-timing-function: ease-out;
        left: 0;
        box-shadow: 0.2ch 0 0.3ch #0008;
    }
    &::after {
        // content: "toc";
        // content: "menu_book";
        content: "menu_open";
        font-family: "Material Icons";
        position: absolute;
        left: 100%;
        font-size: 1rem;
        line-height: 0.9em;
        opacity: 0.5;
        top: 0.5rem;
        background-color: #fff4;
        padding: 0.25rem;
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        color: white;
        z-index: -1;
    }
    &:hover::after {
        opacity: 1;
    }
    ul {
        margin: 0;
        padding: 0;
        padding-left: 2ch;
    }
    > ul {
        padding-left: 0;
        overflow-y: auto;
        height: 100%;
        ul {
            font-size: 0.9em;
            list-style-type: disc;
            li::marker {
                // content: "⁃";
                // content: "—";
                content: "–";
            }
        }
    }
    li {
        position: relative;
        &.th-toc-current::after {
            content: "▸";
            font-size: 1rem;
            position: absolute;
            right: 0;
            top: 0;
            line-height: 1;
        }
        > div {
            padding: 0.25em 0;
        }
        &.th-toc-current > div,
        > div:hover {
            color: #ff0;
            background-color: hsl(60, 50%, 30%);
        }
    }
    a {
        color: inherit;
        text-decoration: none;
        display: block;
        padding: 0 0.5ch;
    }
    .th-toc-level-1 > div {
        font-weight: bold;
    }
    .th-toc-level-1 li:not(:hover):not(.th-toc-current-within) > ul {
        display: none;
    }
    .th-toc-current-within li > ul,
    :hover li > ul {
        display: block !important;
    }
}