@import '_vars'

nav
    display: flex
    align-items: center
    position: relative

    >.logo
        display: inline-block
        stroke: $primary-light
        min-height: 40px
        min-width: 40px
        height: 40px
        width: 40px

        margin-right: 8px
        transition: stroke 0.2s

    >h1
        font-weight: 500
        font-size: 20px
        user-select: none

        mark
            font-size: 1rem
            position: relative
            top: -3px


    >span
        flex-grow: 1


    #menu
        display: none
        cursor: pointer

.link-menu
    >a
        font-size: 14px
        font-weight: 600
        margin-left: 2rem
        text-decoration: none
        transition: color 0.1s

        &:hover
            color: $primary-light

@media (max-width: 800px)
    .link-menu
        transform: scale(0.8) translateX(1rem)
        opacity: 0

        z-index: 100
        width: 200px
        position: absolute
        top: 5rem
        right: 2rem
        background: $secondary
        padding: 1rem 0
        border-radius: $edge
        backdrop-filter: blur(4px)
        border: 1px solid $border

        transition: transform 0.2s, opacity 0.2s

        &.open
            opacity: 1
            transform: inherit

        a
            font-size: 20px
            display: block
            line-height: 3rem

    nav
        .logo
            stroke: $primary-light

        #menu
            display: block
            min-height: 32px
            min-width: 32px
            height: 32px
            width: 32px
            cursor: pointer
            transition: 0.5s

            &.active
                transform: rotate(90deg)

@media (max-width: 400px)
    nav
        h1
            display: none