nav,
.nav
    background: $light
    @include clearfix()

    .container
        width: inherit
        margin: 0 auto
        padding: 0 35px

        @media (max-width: $breakpoint-width)
            padding: 0

    &.bar
        border-bottom: 1px solid darken($light, 5)

    &.pagination
        @include inline-block()
        @include border-radius()
        @include bottom-margin()

        border: 1px solid darken($light, 5)

        li
            @media (max-width: $breakpoint-width)
                @include inline-block

    &.breadcrumbs
        background: $light
        padding: 9px 20px
        border: 1px solid darken($light, 5)

        @include border-radius()
        @include bottom-margin()

        li
            color: darken($grey, 25)

            @include inline-block()

            a
                @include inline-block()
                color: $link
                padding: 0

                &:hover, &:active, &.active
                    color: $link
                    background: inherit

            &.active
                color: darken($grey, 25)
                cursor: not-allowed

            &:after
                $nbsp: "\00a0"
                $separator: "/"
                content: "#{$nbsp}#{$separator}"

                padding: 0 8px 0 6px
                color: $disabled

            &:last-child::after
                content: ""
                padding: 0

    ul, ol
        margin: 0
        padding: 0
        list-style: none

        &.right
            ul, ol
                right: 0

            @media (max-width: $breakpoint-width)
                float: none

        li
            position: relative
            vertical-align: top
            float: left

            li
                float: none

            > span, a
                display: block
                padding: $padding-nav-item
                color: $default
                cursor: pointer !important
                white-space: nowrap

                .fa, .material-icons
                    font-size: 16px

                &:hover, &:focus
                    color: $default
                    background: darken($light, 5)

            @media (max-width: $breakpoint-width)
                display: none
                float: none

            &.right
                float: right

                @media (max-width: $breakpoint-width)
                    float: none

            > ul, > ol
                background: $light
                border: 1px solid darken($light, 5)

            &.dropdown
                > span::after
                    content: " ▾"

    .brand
        > span, a
            font-size: 18px
            padding: 10px 24px 0
            line-height: 25px

            &:hover
                background: inherit

        @media (max-width: $breakpoint-width)
            visibility: hidden
            display: none
            height: 0

    input[type=text],
    input[type=email],
    input[type=password],
    input[type=search],
    input[type=url]
        background: transparent
        border: none
        margin: 0 2px
        padding: 0 15px
        height: 45px

        @include border-radius(0)

        @media (max-width: $breakpoint-width)
            margin: 8px 18px
            height: 35px

        &:hover, &:active, &:focus, &.focus
            background: $grey

    &.fixed
        position: fixed
        top: 0
        left: 0
        right: 0
        z-index: 9999

    .open li
        @media (max-width: $breakpoint-width)
            display: block

    .collapse
        display: none

        @media (max-width: $breakpoint-width)
            display: block

    &.dark
        background: $dark

        &.bar
            border-color: darken($dark, 5)

        input[type=text],
        input[type=email],
        input[type=password],
        input[type=search],
        input[type=url]
            color: $white

            &:hover, &:active, &:focus, &.focus
                background: darken($dark, 5)

        li
            > ul, > ol
                background: $dark
                border-color: darken($dark, 5)

            > span, a
                color: $white

                &:hover, &:focus
                    color: $white
                    background: darken($dark, 5)

    &.dropdown, .dropdown
        .fa-angle-down
            padding-left: 10px

            @media (max-width: $breakpoint-width)
                float: right

        > ul, > ol
            display: none
            position: absolute
            min-width: 150px
            z-index: 2
            border-top: none

            @include border-radius-bottom(4px)

            @media (max-width: $breakpoint-width)
                position: relative
                max-width: 100%

        li
            display: block

        &.open
            > ul, > ol
                &:hover
                    @media (max-width: $breakpoint-width)
                        display: block
                        border-bottom: none

        &:hover
            > ul, > ol
                display: block

                @media (max-width: $breakpoint-width)
                    display: none

.header
    &.fixed
        position: fixed
        top: 0
        width: 100%
        z-index: 5

    .nav
        background: $white
        border: none
        border-bottom: 1px solid darken($light, 5)

        @include border-radius(0)

        li > ul,
        li > ol
            background: $white
            border: 1px solid darken($white, 5)

        li
            a:hover
                background: darken($white, 5)

            &.open
                li.logo
                    @media (max-width: $breakpoint-width)
                        display: none
                        visibility: hidden