// Table of contents

.local_toc ul
{
    padding-left: 1rem;

    list-style: none;

    a
    {
        text-decoration: none;
        color: $main-text-color;
    };

    li
    {
        padding: .2rem 0;
    }
}


nav.toc
{
    flex-shrink: 0;
    display: none;
    width: 100%;

    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;

    margin-right: 1rem;
    padding: 0;
    padding-right: 1rem;

    transition: left .5s ease;

    background-color: $toc-background-color;
    border-right: $toc-border-right;

    @media (min-width: $toc-break)
    {
      display: flex;
      max-width: 25ch;
    };
}

nav.active
{
    width: 100%;
}

.toc ul
{
    min-width: 100%;
    padding-left: 0;

    list-style: none;

    a
    {

        display: inline-block;

        max-width: 90%;
        padding-top: .5rem;
        padding-right: .5rem;
        padding-bottom: .5rem;

        transition: all .1s ease;
        text-align: left;
        text-decoration: none;

	font-size: .75*$doc-title-font-size;
        color: $toc-text-color;
        text-shadow: $toc-text-shadow;

        flex-grow: 1;
        &:hover
        {
            transition: all .2s ease;

            background: darken($toc-background-color, 10%);
        };
    };


    li
    {
        display: flex;

        min-width: 100%;

        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: $toc-background-color;
    }

    li.current
    {
        background-color: $toc-current-bg-color;
	font-weight: $toc-current-font-weight; 
    }
}

@for $i from 0 through 4
{
    .sub-toc-#{$i} a
    {
        padding-left: ($i+1)*$toc-padding;
    }
}

@for $i from 1 through 4
{
    ul.sub-toc-#{$i}
    {
        display: none;
    }
}

span.expand-toc
{
    min-width: .7rem;
    width: .8rem;
    height: .8rem;
    padding: 0;
    padding-right: .5rem;

    cursor: pointer;
    text-align: center;

    color: lighten($toc-text-color, 10%);
    font-size: 125%;
    background-color: Transparent;
}
svg.close-toc
{
    min-width: 1.3rem;
    min-height: 1.3rem;
    margin: .5rem;
    margin-left: auto;

    cursor: pointer;
    text-align: center;

    color: $toc-text-color;
    background-color: Transparent;
    display: none;
}

nav.active svg.close-toc {
  display: inline-block;
}


ul.active
{
    display: block;
}
