nav.sass

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

.menu
    @include media-breakpoint-down(desktop)
        -webkit-flex-basis: 100vw
        display: none
        flex-basis: 100vw
        margin-top: $spacing1
        max-height: calc(100vh - var(--header-height) - #{$spacing4})
        overflow: auto
    a,
    a:focus,
    a:active
        @include link($header-color, false)
    span
        color: $header-color
    ul
        list-style: none
        margin: 0
        padding: 0
    a,
    span
        @include meta
        cursor: pointer
        transition: text-decoration 0.15s
        display: block
        // &:not(:hover)
        //     text-decoration-color: transparent
        &[aria-expanded]
            @include icon(caret, after)
                margin-left: px2rem(5)
                transition: transform 0.15s
            &[aria-expanded="true"]
                &::after
                    transform: rotate(180deg)

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

    .dropdown-menu
        display: none
        background: $header-dropdown-background
        @include media-breakpoint-down(desktop)
            padding-bottom: $spacing1
        @include media-breakpoint-up(desktop)
            padding: $spacing1
            position: absolute
            max-height: calc(100vh - var(--header-height))
            max-height: calc(-webkit-fill-available - var(--header-height))
            overflow: auto
        a
            color: $header-dropdown-color
            &:hover,
            &:focus
                text-decoration-color: $header-dropdown-color

    .nav-level-1
        display: flex
        > li
            > a, span
                @include meta
                display: block
                padding: calc(#{$spacing0} * 0.5) $spacing0
            &:last-child 
                a, span
                    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
        > li
            > a,
            > span
                @include signature

    .nav-level-3
        display: block
        padding-top: half($spacing0)
        a,
        span
            @include meta

    @include media-breakpoint-up(desktop)
        .nav-level-3
            li
                margin-top: $spacing0
        @if $header-dropdown-full
            .dropdown-menu
                inset: 100% 0 auto 0
                padding-left: 0
                padding-right: 0
                padding-bottom: $spacing2
            .nav-level-2
                @include container
                @include grid(4, desktop)
        @else 
            .has-children
                position: relative
            .dropdown-menu
                margin-top: $header-nav-padding-y
                min-width: 400px
                padding-left: $spacing1
                padding-top: $spacing0
                padding-right: $spacing1
                right: 0
                text-align: right
            .nav-level-2
                > li 
                    > a
                        padding-bottom: half($spacing0)
                        padding-top: half($spacing0)
                        display: block
                    + li.has-children
                        margin-top: $spacing1

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

        .nav-level-2
            > .has-children + .has-children
                margin-top: $spacing1
        .nav-level-3
            padding-top: 0

.share
    display: flex
    list-style: none
    margin: 0
    padding: 0
    li:not(:last-child)
        margin-right: 1rem
    a
        text-decoration: none
        padding: $spacing0
        font-size: px2rem(24)
        &:hover
            opacity: 0.7
        &::after
            content: none
    span
        display: none
        vertical-align: middle


[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