@require './utils.styl'

$foregound=#ffffff

menu-item-hover()
    box-shadow: 0 1em 0 -.75em $foregound
    box-sizing: content-box
    transform: translateY(.25em)

nav.main
    font-family: 'Space Mono', monospace
    position: fixed
    top: 0
    left: 0
    z-index: 5
    width: 100vw
    padding: 1.5em
    background: rgb(0,0,0)
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%)

    #icon
        height: 2.5em
        width: 2.5em
        object-fit: contain
        z-index 10
        cursor pointer
        display: none

    .home
        color: $foregound
        font-weight: bold
        font-size: 2em
        cursor pointer

    .links
        &>div
            color: $foregound
            padding: .5em 0.75em
            font-weight: bold
            box-sizing: content-box
            cursor pointer
            transition: all ease 100ms

            &:hover
                menu-item-hover()
        
        &:not(:hover)
            &>.active
                menu-item-hover()
        
        >.home
            display: none

@media (max-width: $mobile-width)
    nav.main
        #icon
            display: initial
            
        .links
            position: fixed
            display: none
            top: 0
            left: 0
            background: rgba(0, 0, 0, 1)
            height: 100vh
            width: 100vw
            flex-direction: column
            align-items: center
            justify-content: center

            &.open
                display: flex

            & .home
                display: initial

            &>div
                margin: .5em 0