//- 💫 CSS > COMPONENTS > NAVIGATION

.c-nav
    @include position(fixed, top, left, 0, 0)
    @include size(100%, $nav-height)
    background: $color-back
    color: $color-theme
    align-items: center
    display: flex
    justify-content: space-between
    flex-flow: row wrap
    padding: 0 2rem 0 1rem
    z-index: 30
    width: 100%
    box-shadow: $box-shadow

    &.is-fixed
        animation: slideInDown 0.5s ease-in-out
        position: fixed

.c-nav__menu
    @include size(100%)
    display: flex
    justify-content: flex-end
    flex-flow: row nowrap
    border-color: inherit
    flex: 1

.c-nav__menu__item
    display: flex
    align-items: center
    height: 100%
    text-transform: uppercase
    font-family: $font-secondary
    font-size: 1.6rem
    font-weight: bold
    color: $color-theme

    &:not(:first-child)
        margin-left: 2em

    &.is-active
        color: $color-dark
        pointer-events: none