@import "variables.scss";
@import "mixins.scss";

$toc-color: $code-color;
$toc-border-color: $code-border-color;
$toc-float-max-width: 20rem;

@mixin below-max-toc-width {
    @media screen and (max-width: 2.5rem + 1.5 * $toc-float-max-width + 2 * $container-min-padding){
        @content;
    }
}

.table-of-contents {
    @include margin-content;
    @include margin-content-left;
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-bottom: 1rem;

    em {
        font-style: normal;
        font-weight: bold;
        font-size: 1.2em;
        display: block;
        margin-bottom: 1rem;
    }

    #TableOfContents > ul {
        padding-left: 0;
    }

    nav {
        width: auto;
        margin: 0px;
    }

    ul {
        position: relative;
        list-style: none;
        padding-left: 2rem;
        margin: 0px;
    }

    li {
        position: relative;
    }

    a {
        padding: 0;
        vertical-align: top;
        overflow-x: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    div.wrapper {
        @include bordered-block;
        padding: 1rem;
        background-color: $toc-color;
        border-color: $toc-border-color;
        box-sizing: border-box;
        max-width: 100%;
    }
}