nav.sass

@keyframes showIn
    0%
        opacity: 0
    100%
        opacity: 1
    0%
        opacity: 0

.menu
    @include media-breakpoint-down(md)
        -webkit-flex-basis: 100vw
        display: none
        flex-basis: 100vw
        margin-top: 1.875rem
        max-height: 70vh
        overflow: auto

    a,
    a:hover,
    a:focus,
    a:active
        @include link($header-color)
    ul
        display: flex
        list-style: none
        margin: 0
        padding: 0
    a,
    span
        font-size: px2rem(18)
        line-height: px2rem(26)
        cursor: pointer
        transition: text-decoration 0.15s
        &:not(:hover)
            text-decoration-color: transparent
        &[aria-expanded]
            @include icon(caret, after)
                font-size: px2rem(6)
                margin-left: px2rem(5)
                transition: transform  0.15s
            &[aria-expanded="true"]
                &::after
                    transform: rotate(180deg)

        @include media-breakpoint-up(md)
            a:hover,
            a:focus
                color: $header-hover-color

    .dropdown-menu
        display: none
        background: $header-dropdown-background
        padding-bottom: $spacing1
        padding-top: $spacing1
        @include media-breakpoint-up(md)
            inset: 100% 0 auto 0
            position: absolute
        a
            color: $header-dropdown-color 

    .nav-level-1
        display: flex
        @include media-breakpoint-down(md)
            @include grid(1)
        > li
            > a, span
                display: block
                padding: $spacing1
            &:last-child a
                padding-right: 0
        li.has-children
            [aria-expanded="true"] + .dropdown-menu
                display: block
                animation-duration: $header-dropdown-transition
                animation-fill-mode: both
                animation-name: showIn

    .nav-level-2
        @include grid(1)
        @include media-breakpoint-up(md)
            @include container
            @include grid(4, md)
        > li
            > a,
            > span
                font-size: px2rem(16)
                line-height: px2rem(26)
                @include media-breakpoint-up(lg)
                    font-size: px2rem(18)

    .nav-level-3
        display: block
        a,
        span
            font-size: px2rem(14)

    @include media-breakpoint-down(md)
        &.is-opened
            display: block
        a, span
            text-decoration: none
        .nav-level-1
            display: block
            li 
                a, span
                    padding: 1rem 0
            > li:not(:last-child) 
                border-bottom: 1px solid #adb5bd
            li.has-children
                [role="button"]
                    align-items: center
                    display: flex
                    justify-content: space-between
                    @include icon("caret-bottom", after)
                    &::after
                        font-size: .375rem
                        line-height: 1
                .dropdown-menu
                    display: none
                    padding-top: 0
                [aria-expanded=true] + .dropdown-menu
                    display: block

// TODO : Est-ce au bon endroit ?
body
    &::after
        @include inset(0)
        background-color: $body-overlay-color
        content: ""
        pointer-events: none
        position: fixed
        opacity: 0
        visibility: hidden
        transition: opacity $header-transition
        z-index: $zindex-body-overlay

    html.has-menu-opened &
        &::after
            display: block
            opacity: 1
            pointer-events: inherit
            visibility: inherit

    html.is-animating:not(.has-menu-opened) &
        &::after
            display: block
            visibility: inherit
            opacity: 0

.share
    display: flex
    list-style: none
    margin: 0
    padding: 0

    li:not(:last-child)
        margin-right: 1rem

    a
        font-size: px2rem(13)
        text-decoration: none
        padding: $spacing0
        &::before
            font-size: px2rem(13)
        &:hover
            opacity: 0.7
        &::after
            content: none

    span
        display: none
        vertical-align: middle

.dropdown-share
    position: relative
    > button
        @include button-icon(social)
        color: $hero-color
        border-color: $hero-color
        font-size: $program-share-font-size
        @include media-breakpoint-up(md)
            font-size: $program-share-font-size-md
    .dropdown-menu
        background: invert($hero-background-color)
        padding: 0
        position: absolute
        width: 100%
        bottom: 100%
        .share
            display: flex
            li
                margin: 0
                flex: 1 1
                text-align: center
        a
            display: block
            color: invert($hero-color)


[aria-expanded="false"] + .dropdown-menu
    display: none
[aria-expanded="true"] + .dropdown-menu
    display: block
    animation-duration: 0.3s
    animation-fill-mode: both
    animation-name: showIn