// Base format for the navigation parts.
//
=INDENT($DEPTH, $BASE, $STEP, $PROGRESS:$DEPTH)
    @if $PROGRESS > 0
        & li
            +INDENT($DEPTH, $BASE, $STEP, $PROGRESS - 1)
    @else
        & a
            padding-left: #{($BASE + $STEP * ($DEPTH - 1))}px

=INDENTS($COUNT, $BASE, $STEP)
    @for $DEPTH from 1 through $COUNT
        +INDENT($DEPTH, $BASE, $STEP)

.tsd-navigation
    padding: 0 0 0 40px

    a
        display: block
        padding-top: 2px
        padding-bottom: 2px
        border-left: 2px solid transparent
        color: $COLOR_TEXT
        text-decoration: none
        transition: border-left-color 0.1s

        &:hover
            text-decoration: underline

    ul
        margin: 0
        padding: 0
        list-style: none

    li
        padding: 0


// Primary part of the navigation containing the available modules.
//
// <nav class="tsd-navigation primary">
//   <ul>
//     <li class="globals"><a href="#"><em>Globals</em></a></li>
//     <li class="current tsd-kind-container">
//       <a href="#">TypeDoc</a>
//       <ul>
//         <li class="tsd-kind-container tsd-parent-kind-container"><a href="#">Factories</a></li>
//         <li class="tsd-kind-container tsd-parent-kind-container"><a href="#">Models</a></li>
//         <li class="current tsd-kind-container tsd-parent-kind-container"><a href="#">Output</a></li>
//       </ul>
//     </li>
//   </ul>
// </nav>
//
.tsd-navigation.primary
    padding-bottom: 40px

    a
        display: block
        padding-top: 6px
        padding-bottom: 6px

    ul
        +INDENTS(6, 5, 20)

    > ul
        border-bottom: 1px solid $COLOR_PANEL_DIVIDER

    li
        border-top: 1px solid $COLOR_PANEL_DIVIDER

        &.current > a
            font-weight: bold

        &.label span
            display: block
            padding: 20px 0 6px 5px
            color: $COLOR_MENU_LABEL

        &.globals + li > span,
        &.globals + li > a
            padding-top: 20px


// Secondary part of the navigation containing the table of contents
// of the current module.
// Can be made sticky by `typedoc.MenuSticky` and will highlight current sticky with `typedoc.MenuHighlight`.
//
// <nav class="tsd-navigation secondary">
//   <ul class="before-current">
//     <li class="tsd-kind-class tsd-parent-kind-container"><a href="#" class="tsd-kind-icon">AssetsPlugin</a></li>
//     <li class="tsd-kind-class tsd-parent-kind-container"><a href="#" class="tsd-kind-icon">BasePlugin</a></li>
//     <li class="tsd-kind-class tsd-parent-kind-container"><a href="#" class="tsd-kind-icon">BaseTheme</a></li>
//   </ul>
//   <ul class="current">
//     <li class="current tsd-kind-class tsd-parent-kind-container">
//       <a href="#" class="tsd-kind-icon">OutputEvent</a>
//       <ul>
//         <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><a href="#" class="tsd-kind-icon">isDefaultPrevented</a></li>
//         <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><a href="#" class="tsd-kind-icon">isPropagationStopped</a></li>
//         <li class="tsd-kind-property tsd-parent-kind-class"><a href="#" class="tsd-kind-icon">outputDirectory</a></li>
//         <li class="tsd-kind-property tsd-parent-kind-class"><a href="#" class="tsd-kind-icon">project</a></li>
//       </ul>
//     </li>
//   </ul>
//   <ul class="after-current">
//     <li class="tsd-kind-class tsd-parent-kind-container"><a href="#" class="tsd-kind-icon">OutputPageEvent</a></li>
//     <li class="tsd-kind-class tsd-parent-kind-container"><a href="#" class="tsd-kind-icon">PartialsPlugin</a></li>
//   </ul>
// </nav>
//
.tsd-navigation.secondary
    ul
        +INDENTS(6, 25, 20)
        transition: opacity 0.2s

        &.current a
            border-left-color: $COLOR_PANEL_DIVIDER

    li.focus > a,
    ul.current li.focus > a
        border-left-color: $COLOR_MENU_DIVIDER_FOCUS

    li.current
        margin-top: 20px
        margin-bottom: 20px
        border-left-color: $COLOR_PANEL_DIVIDER

        > a
            font-weight: bold


// Sticky menu setup
//
.menu-sticky-wrap
    +size-md-lg
        position: static

        .no-csspositionsticky &
            &.sticky
                position: fixed

            &.sticky-current
                position: fixed

                ul.before-current,
                ul.after-current
                    opacity: 0

            &.sticky-bottom
                position: absolute
                top: auto !important
                left: auto !important
                bottom: 0
                right: 0

        .csspositionsticky &
            &.sticky
                position: sticky

            &.sticky-current
                position: sticky