// 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
    margin: 0 0 0 40px

    a
        display: block
        padding-top: 2px
        padding-bottom: 2px
        border-left: 2px solid transparent
        color: var(--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 var(--color-panel-divider)

    li
        border-top: 1px solid var(--color-panel-divider)

        &.current > a
            font-weight: bold

        &.label span
            display: block
            padding: 20px 0 6px 5px
            color: var(--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
    max-height: calc(100vh - 1rem - #{$TOOLBAR_HEIGHT})
    overflow: auto
    position: -webkit-sticky
    position: sticky
    top: calc(.5rem + #{$TOOLBAR_HEIGHT})
    transition: .3s

    &.tsd-navigation--toolbar-hide
        max-height: calc(100vh - 1rem)
        top: .5rem

    ul
        +INDENTS(6, 25, 20)
        transition: opacity 0.2s

        &.current a
            border-left-color: var(--color-panel-divider)

    li.focus > a,
    ul.current li.focus > a
        border-left-color: var(--color-menu-divider-focus)

    li.current
        margin-top: 20px
        margin-bottom: 20px
        border-left-color: var(--color-panel-divider)

        > a
            font-weight: bold

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