.toc
    display block
    font-size $toc_fontsize
    overflow auto
    list-style-type none
    padding-left 0


    .toc-link
        color #808080

    .toc-child
        padding-left 0.6rem
        list-style-type none

.btn-toc
    display none
    width 3rem
    height 3rem
    position fixed
    z-index 1001
    right 1.2rem
    bottom 4.8rem
    border-radius $radius_button
    color var(--title-color)
    background var(--bg-menu)
    -webkit-box-shadow 0 0.3rem 0.6rem rgba(48,55,66,0.15)
    box-shadow 0 .3rem .6rem rgba(48,55,66,.15);

    *
        margin 8px

    &:focus + .toc-menus
        display block

.toc-menus
    -webkit-animation slide-up 0.15s ease 1
    animation slide-up 0.15s ease 1
    display none
    position fixed
    left 12px
    right 12px
    bottom 12px
    max-height 60vh
    overflow auto
    border-radius 6px
    padding 24px
    background var(--bg-content-color)
    -webkit-box-shadow 1px 1px 5px 0 rgba(0,0,0,0.02), 1px 1px 15px 0 rgba(0,0,0,0.03)
    box-shadow 1px 1px 5px 0 rgba(0,0,0,.02),1px 1px 15px 0 rgba(0,0,0,.03)
    z-index 9999

    &:hover
        display block

    .toc-title
        font-size 0.9rem
        color #808080
        margin-bottom 0.8rem
        padding-bottom 0.2rem
        border-bottom 1px solid #eaecef

.post-side
    display block
    height 0
    float right
    position -webkit-sticky
    position sticky
    top: 'calc(%s + 10px)' % $header_height
            
    .post-side__toc
        display block
        
        .toc
            display none
            width 'calc((100vw - %s) / 2 - 12.6px)' % $max_width_main
            height 'calc(100vh - %s * 2 - 20px)' % $header_height
            padding-left 0.6rem

@media screen and (max-width: 1246px)
    .post-side
        width calc(100vw / 6 - 20px)
        
        .post-side__toc
            .toc
                width calc(100vw / 6 - 20px)

    .post__with-toc
    .nav
        max-width calc(100vw / 6 * 4)

@media screen and (max-width: 1080px)
    .post-side
        width calc(100vw / 4 - 30px)
        
        .post-side__toc
            .toc
                width calc(100vw / 4 - 30px)
    
    .post__with-toc
    .nav
        max-width calc(100vw / 4 * 3)
        margin-left 0

@media screen and (min-width: 765px)
    .post-side
        .post-side__toc
            .toc
                display block
    
@media screen and (max-width: 764px)
    .post__with-toc
    .nav
        max-width var(--content-width)

    #btn-toc
        display block

@-webkit-keyframes slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(1.6rem);
        transform: translateY(1.6rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(1.6rem);
        transform: translateY(1.6rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}