@charset "utf-8";

$table-of-content-item-padding-left: 0.75rem !default;

.menu-container {
    // Make the menu container "static" and always displayed at the same place
    // The menu container has its own scrollbar if needed
    // 3.25rem is the navbar height but it is not yet available at this point of the SCSS compilation
    position: sticky;
    top: $computed-navbar-height;
    // margin: 3.25rem 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(100vh - #{$computed-navbar-height});

    @include touch {
        height: calc(100vh - #{$computed-navbar-height});
    }

    .menu {
        margin-top: $navbar-height;
        padding-right: 1rem;
        padding-left: 1rem;

        @include desktop {
            margin-bottom: $navbar-height;
        }

        @include touch {
            margin-bottom: 10rem;
        }

        .menu-external-link {
            position: relative;

            &::after {
                content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
                position: absolute;
                top: calc(50% - 5px);
                padding-left: 0.325rem;
            }
        }

        .table-of-content {
            @for $rank from 3 through 6 {
                [data-toc-rank="#{$rank}"] {
                    padding-left: calc($table-of-content-item-padding-left * ($rank - 2));
                }
            }
        }
    }
}

.column.is-menu-column {
    &.force-show {
        display: block !important;
        padding: 0 !important;

        .menu-container {
            position: fixed;
            left: 0;
            background: $white-bis;
            width: 100%;
            z-index: 2;
            margin-top: $navbar-height;
        }
    }
}