//- 💫 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 nowrap
    padding: 0 0 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
    flex-flow: row nowrap
    border-color: inherit
    flex: 1


    @include breakpoint(max, sm)
        @include scroll-shadow-base($color-front)
        overflow-x: auto
        overflow-y: hidden
        -webkit-overflow-scrolling: touch

    @include breakpoint(min, md)
        justify-content: flex-end

.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

    &:last-child
        @include scroll-shadow-cover(right, $color-back)
        padding-right: 2rem

    &:first-child
        @include scroll-shadow-cover(left, $color-back)
        padding-left: 2rem

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