/* Unfold Sidebar */
/* By Mercuresphere */

:root {
    --toggle-button-bg: rgb(var(--swatch-menubg-color));
    --toggle-border-color: rgb(var(--swatch-border-color));
    --toggle-border-width: 0.25rem;
    --toggle-icon-color: rgb(var(--sidebar-links-text));
    --toggle-roundness: 50%;
}

@media only screen and (min-width: 769px) {
    #content-wrap {
        max-width: unset;
        display: grid;
        position: static;
        grid-template-columns: calc(var(--sidebar-width-on-desktop)) calc(50% - var(--body-width-on-desktop)/2 - var(--sidebar-width-on-desktop)*3/2) 1fr calc(50% - var(--body-width-on-desktop)/2 - var(--sidebar-width-on-desktop)/2);
        grid-template-areas: "side-bar . content";
        grid-area: content-wrap;
        flex-grow: 2;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
        height: auto;
        min-height: calc(100vh - var(--final-header-height-on-desktop));
    }

    #main-content {
        position: unset;
        max-height: unset;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        grid-template-areas:
            "action-area-top"
            "page-title"
            "breadcrumbs"
            "page-content"
            "page-tags"
            "page-info-break"
            "page-options"
            "action-area-btm";
        grid-area: content;
        flex-basis: var(--body-width-on-desktop);
        margin: 0 auto;
        background-color: transparent;
        padding: 2rem 1rem;
        width: calc(100% - 3rem);
        max-width: var(--body-width-on-desktop);
    }

    #side-bar {
        transform: unset;
        transform: unset;
        transition: unset;
        width: unset;
        min-width: unset;
        grid-area: unset;
        padding-right: unset;
        top: unset;
        max-height: unset;
        position: unset;
        left: unset;
        padding-left: unset;
        scrollbar-width: unset;
        overscroll-behavior: unset;
        scrollbar-color: unset;
        direction: rtl;
        height: calc(100vh + 2rem);
        background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 1);
    }

    #side-bar::-webkit-scrollbar-thumb {
        background-color: rgba(170, 170, 170, 1);
    }

    #side-bar:hover::-webkit-scrollbar-track {
        background: rgba(var(--swatch-tertiary-color), .05);
    }

    #side-bar:hover, #side-bar:active {
        padding-right: unset;
        margin-right: unset;
        transform: unset;
        transform: unset;
        overflow-y: unset;
        scrollbar-color: unset;
    }

    #side-bar:focus-within {
        padding-right: unset;
        margin-right: unset;
        transform: unset;
        transform: unset;
        overflow-y: unset;
        scrollbar-color: unset;
    }

    #main-content::after {
        content: unset;
        position: unset;
        display: unset;
        align-items: unset;
        justify-content: unset;
        width: unset;
        height: unset;
        max-height: unset;
        top: unset;
        transition: unset;
        left: unset;
        background: unset;
        background-repeat: unset;
        background-position: unset;
        background-attachment: unset;
        background-size: unset;
        pointer-events: unset;
    }

    #side-bar:hover+#main-content::after, #side-bar:active+#main-content::after {
        left: unset;
        left: unset;
        background-position: unset;
        background-position: unset;
        transition: unset;
        opacity: unset;
        width: unset;
        font-size: unset;
    }

    #side-bar:focus-within+#main-content::after {
        left: unset;
        left: unset;
        background-position: unset;
        background-position: unset;
        transition: unset;
        opacity: unset;
        width: unset;
        font-size: unset;
    }

    #main-content::before {
        --not-ie: unset;
        content: unset;
        background-color: unset;
        background-color: unset;
        position: unset;
        position: unset;
        top: unset;
        top: unset;
        left: unset;
        transform: unset;
        transform: unset;
        width: unset;
        width: unset;
        height: unset;
        height: unset;
        transition: unset;
        opacity: unset;
        pointer-events: unset;
        z-index: unset;
        margin-bottom: unset;
        margin-bottom: unset;
    }

    #side-bar:hover+#main-content::before, #side-bar:active+#main-content::before {
        transform: unset;
        opacity: unset;
    }

    #side-bar:focus-within+#main-content::before {
        transform: unset;
        opacity: unset;
    }

    #side-bar .side-block {
        margin-top: unset;
        background-color: unset;
        border-radius: unset;
        border-left-width: unset;
        border-right-width: unset;
        direction: ltr;
    }

    @supports (-ms-ime-align: auto) {
        #side-bar {
            overflow-y: unset;
            overflow-x: unset;
            transform: unset;
        }

        #side-bar:hover, #side-bar:active {
            overflow-y: unset;
            transform: unset;
            margin-left: unset;
        }

        #side-bar:focus-within {
            overflow-y: unset;
            transform: unset;
            margin-left: unset;
        }

        #main-content::before {
            left: unset;
            transform: unset;
        }
    }
}