//@format
$toc_breakpoint: 768px;
.toc {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 100px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.node .toc-tree {
    border: none;
    padding: 0;
}
.toc-block--mobile {
    @include breakpoint($desktop-up) {
        //display: none;
    }
}
.toc-block--wide {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 100px;
    margin-top: 2rem;
    .toc--title {
        &[aria-expanded='true'] h2::after {
            //content: "\f146";//square
            content: '\f068';
        }
        &[aria-expanded='false'] h2::after {
            //content: "\f0fe";
            content: '\f067';
        }
        h2::after {
            font-family: 'FontAwesome';
            position: absolute;
            //top: 6px;
            right: 0;
            font-weight: 400;
            line-height: 20px;
            font-size: 2rem;
            background: #ccc;
            padding: 10px;
            //text-align: right;
        }
        h2 {
            text-align: left;
            border: 1px dotted #ccc;
            padding: 0px;
            padding-left: 10px;
            line-height: 40px;
            margin-bottom: 0px;
            background: #f5f3f3;
        }
    }
    .toc--list {
        border: 1px dotted #ccc;
        border-top: 0px;
        padding-top: 1rem;
        ol {
            list-style-type: none;
            padding-left: 0;

            font-family: $serif;
            font-size: 1.8rem;
            line-height: 1.8;
        }
        a {
            display: block;
            padding-left: 1rem;
            &:hover {
                background: #ccc;
            }
        }
    }
}

.region-sidebar-second {
    height: 1000px;
}
.node__main-content .toc-block--wide {
    @include breakpoint($desktop-up) {
        //display: none;
    }
}
.toc-container .toc-block--wide {
    @include breakpoint($desktop-up) {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 300px;
    }
}
.toc-desktop {
    display: block !important;
}
.toc-mobile {
    display: none !important;
}
//.article-title-banner {
//grid-area: header;
//}
//.node__main-content {
//grid-area: main;
//}
//.toc-container {
//grid-area: toc;
//}
//.node__container {
//display: grid;
//grid-template-columns: 70% 30%;
//grid-template-rows: auto;
//grid-template-areas:
//'header header'
//'toc toc'
//'main main';
//@include breakpoint($desktop-up) {
//grid-template-areas:
//'header header'
//'main toc';
//}
//}