table_of_contents.sass

@mixin offcanvas-toc
    --toc-transition-duration: 0.35s
    background: $toc-background-color
    position: fixed
    top: 0
    right: 0
    bottom: 0
    margin-top: 0
    z-index: $zindex-toc-offcanvas
    width: calc(#{columns(4)} + var(--grid-gutter) * 2)
    transform: translateX(100%)
    transition: var(--toc-transition-duration) transform ease-in-out
    @include media-breakpoint-down(desktop)
        width: calc(100% - var(--grid-gutter))
    &.is-opened
        transform: translateX(0)
    &[aria-hidden="true"]
        display: none
    .toc-content
        display: flex
        flex-direction: column
        height: 100%
    .toc-title
        border-bottom: 1px solid var(--color-border)
        font-size: $toc-title-font-size
        padding: $spacing-2 $spacing-3
        @include media-breakpoint-up(desktop)
            font-size: $toc-title-font-size-desktop
            padding: $header-nav-padding-y var(--grid-gutter) calc(#{$header-nav-padding-y} + 1px)
            padding: calc((var(--header-height)) / 2 - #{$body-size}) var(--grid-gutter)
            padding-top: 0
            padding-bottom: 0
            line-height: calc(var(--header-height) - 1px)
    .toc
        flex: 1
        display: flex
        flex-direction: column
        overflow-y: auto
        max-height: 100%
        > ol
            flex: 1
            padding: $spacing-3
            @include media-breakpoint-up(desktop)
                padding: $spacing-3 var(--grid-gutter)
            > li:first-child
                margin-top: 0
    button
        @include button-reset
        @include icon-block(close-line, after)
            margin-right: -14px
            font-size: 1.5em
        align-items: center
        border-top: 1px solid var(--color-border)
        display: flex
        justify-content: space-between
        padding: 0 $spacing-3
        line-height: $body-line-height
        @include media-breakpoint-up(desktop)
            border-top: 0
            position: absolute
            padding-right: 0
            top: 0
            padding-top: 0
            padding-bottom: 0
            line-height: var(--header-height)
            right: var(--grid-gutter)
            &::after
                margin-left: $spacing-2

.toc-cta
    display: flex
    position: relative
    @include in-page-with-sidebar
        display: none
    @include media-breakpoint-up(desktop)
        @include container
        background: var(--color-background)
        justify-content: end
        margin-bottom: $spacing-5
        position: sticky
        text-align: right
        top: calc(var(--header-height) * -1)
        transition: top $toc-sticky-transition
        z-index: $zindex-toc-cta
        html:not(.is-scrolling-down) &
            top: var(--header-height)
        body.offcanvas-toc &
            display: flex
    @include media-breakpoint-down(desktop)
        border-top: 1px solid var(--color-border)
        position: fixed
        bottom: 0
        background: $toc-background-color
        left: 0
        width: 100%
        padding: 0 var(--grid-gutter)
        z-index: $zindex-toc-cta
    button
        @include link-icon(menu-3-line)
        border: 0
        line-height: inherit
        cursor: pointer
        padding: 0
        span
            @include meta
            color: $toc-color
            text-overflow: ellipsis
            overflow: hidden
            @include media-breakpoint-down(desktop)
                flex: 1
        &::after
            color: $toc-color
            margin-right: $icon-toc-margin-right
        @include media-breakpoint-down(desktop)
            display: flex
            justify-content: space-between
            align-items: center
            width: 100%

.toc-container
    // in full width page or under md breakpoint (mobile)
    @include in-page-without-sidebar
        @include offcanvas-toc
    @include media-breakpoint-down(desktop)
        @include offcanvas-toc

    // Only desktop and in page with sidebar
    @include in-page-with-sidebar
        margin-left: grid-external-space()
        pointer-events: none
        top: 0
        left: 0
        margin-top: 0
        height: 100%
        position: absolute
        width: columns(4)
        z-index: $zindex-toc
        .toc-content
            overflow-y: auto
            max-height: calc(100vh - var(--header-height))
            padding-bottom: $spacing-4
            pointer-events: auto
            @include sticky($spacing-3)
            html.is-scrolling-down &
                max-height: calc(100vh - #{$spacing-3})
        .toc-title
            color: var(--color-text-alt)
        button
            display: none

    // Program tweak : use offcanvas
    // TODO : find a better way to cancel sidebar props
    body.offcanvas-toc &
        @include offcanvas-toc
        margin-left: 0
        pointer-events: inherit
        left: auto
        .toc-content
            position: relative
            top: 0 !important
            max-height: none
            padding-bottom: 0
            margin-top: 0
            margin-bottom: 0
            html.is-scrolling-down &
                max-height: none

.toc-title, .toc-cta, .toc-container button
    font-family: $toc-title-font-family
    font-size: $toc-title-font-size
    color: $toc-color
    @include media-breakpoint-up(desktop)
        font-size: $toc-title-font-size-desktop

.toc
    font-family: $toc-font-family
    line-height: $toc-line-height
    @include media-breakpoint-up(desktop)
        font-size: $toc-font-size-desktop
    ol
        @include list-reset
        align-items: flex-start
        display: flex
        flex-direction: column
        margin: 0
        li
            margin-top: 1rem
            a
                color: $toc-color
                display: block
                @extend %underline-on-hover
        .active
            color: $toc-active-color
            pointer-events: none
        ol
            padding-left: 0
            li a
                @include icon(corner-down-right-line)
                &::before
                    margin-right: 6px