//- 💫 CSS > COMPONENTS > NAVIGATION

.c-nav
    @include position(absolute, top, left, 0, 0)
    @include size(100%, $nav-height)
    background: $color-back
    color: $color-theme
    align-items: center
    display: flex
    justify-content: space-between
    padding: 0 2rem 0 1rem
    z-index: 20
    width: 100%
    border-bottom: 1px solid $color-subtle

    &.c-nav--theme
        background: $color-theme
        color: $color-back
        border-bottom: none

    &.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

.c-nav__menu__item
    display: flex
    align-items: center
    height: 100%
    text-transform: uppercase

    &:not(:last-child)
        margin-right: 1em