.lx-nav
    width: 100%
    padding: .5rem 15%
    position: relative
    display: flex
    align-items: stretch
    justify-content: space-between
    gap: 1rem
    color: $nav-color
    background-color: $nav-bg
    z-index: 3

    &-brand
        display: flex
        align-items: stretch
        justify-content: space-between

        .lx-nav-item
            span
                font-family: inherit
                font-size: 1.5rem
                font-weight: 600

            img,
            svg
                max-height: 1.75rem
                object-fit: contain

    &-burger
        width: 3.25rem
        height: 3.25rem
        padding: 0
        position: relative
        display: none
        border-radius: .25rem
        border: none
        transition: background-color .3s ease-in-out

        span
            width: 1rem
            height: .125rem
            position: absolute
            left: calc(50% - .5rem)
            display: block
            border-radius: .5rem
            background-color: currentColor
            transition-duration: 86ms
            transition-property: background-color,opacity,transform
            transition-timing-function: ease-out

            &:nth-child(1)
                top: calc(50% - .375rem)

            &:nth-child(3)
                top: calc(50% + .375rem)

        &.is-active,
        &:focus,
        &:hover
            background-color: rgba(0,0,0,0.3)

        &.is-active
            span
                &:nth-child(1)
                    transform: translateY(.375rem) rotate(45deg)

                &:nth-child(2)
                    opacity: 0

                &:nth-child(3)
                    transform: translateY(-.375rem) rotate(-45deg)

    &-menu
        flex-basis: 0
        flex-grow: 1
        display: flex
        flex-flow: nowrap row
        align-items: center
        justify-content: flex-end
        gap: .5rem

    &-item
        margin: 0
        padding: .5rem .75rem
        position: relative
        display: flex
        align-items: center
        justify-content: center
        border-radius: .25rem
        cursor: pointer
        font-size: 1rem
        transition: background-color .3s ease-in-out

        &.dropdown
            width: max-content
            position: absolute
            transform: translateX(-50%)
            top: 100%
            left: 50%
            display: none
            background-color: $nav-bg
            animation: fade-in .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both

            .lx-nav-item
                padding: .5rem 1rem

        &.has-dropdown
            gap: .5rem
            background-color: $nav-bg

            &:after
                content: ""
                width: .6rem
                height: .6rem
                transform-origin: center
                transform: rotate(45deg)
                display: block
                border-radius: .125rem
                border: .1875rem solid $nav-color
                border-bottom: 0
                border-left: 0
                pointer-events: none

        &:focus,
        &:hover
            &:not(.dropdown)
                background-color: rgba(0,0,0,0.3)

            &.has-dropdown
                &>.dropdown
                    display: block

                &:after
                    border-top: 0
                    border-bottom: .1875rem solid $nav-color

@media screen and (max-width: 64rem)
    .lx-nav
        padding: .5rem 5%
        flex-flow: wrap column

        &-brand
            flex-grow: 1

        &-burger
            display: block

        &-menu
            padding: 1rem 5% 2rem
            display: none
            flex-flow: wrap column
            gap: 1rem
            animation: swing-in-top-fwd .5s cubic-bezier(.175, .885, .320, 1.275) both

            .lx-nav-item
                width: 100%
                justify-content: flex-start

                &.has-dropdown
                    flex-flow: wrap column
                    align-items: flex-start
                    justify-content: center

                    &:after
                        display: none

                &.dropdown
                    position: relative
                    display: block
                    transform: none
                    top: unset
                    left: unset

                    .lx-nav-item
                        border-top-left-radius: 0
                        border-bottom-left-radius: 0

                    &:before
                        content: ""
                        width: .125rem
                        height: 80%
                        position: absolute
                        transform: translateY(-50%)
                        top: 50%
                        left: .5rem
                        border-radius: 1rem
                        background-color: $nav-color

            &.is-active
                display: flex
                background-color: $nav-bg

@keyframes swing-in-top-fwd
    0%
        transform: rotateX(-100deg)
        transform-origin: top
        opacity: 0
    100%
        transform: rotateX(0deg)
        transform-origin: top
        opacity: 1

@keyframes fade-in
    0%
        opacity: 0
    100%
        opacity: 1
