// ----------------------------------
//   Navigation
// ----------------------------------

.navigation {

    // General styling (for all viewport widths)
    &:extend(.clearfix all);
    &:extend(.container all);

    min-height:     @navbar-height;

    color:          @navbar-link-color;
    text-shadow:	@navbar-link-text-shadow;
    font-size:      @font-size-navigation;

    // Links inside navigation.
    a {
        color: @navbar-link-color;
        &:hover,
        &:active {
            color: @navbar-link-hover-color;
            text-decoration: none;
        }
    }

    // Menu button
    // -------------------
    .menu-button {
        .button();
        .button-variant(white, #242424);
        margin-top: 8px;
        font-size: 24px;

        // Hide for larger view-ports.
        @media (min-width: @navbar-breakpoint-min) {
            display: none;
        }
    }

    // Menu
    // -------------------
    &-menu ul {
        &:extend(.nav);

        > li {

            // Inline list for larger viewports.
            @media (min-width: @navbar-breakpoint-min) {

                display: inline-block;

                a {
                    display: block;
                    .navbar-vertical-align(@line-height-computed + (@navbar-link-vertical-spacing * 2));
                    padding: @navbar-link-vertical-spacing 10px @navbar-link-vertical-spacing;
                    line-height: @line-height-computed;

                    margin-left: (@navbar-link-spacing / 2);
                    margin-right: (@navbar-link-spacing / 2);

                    &:hover {
                        color: @navbar-link-hover-color;
                        .box-shadow(0 -@navbar-link-underline-height
                                    0 @navbar-link-hover-underline inset);
                    }
                }

                &.active a {
                    color: @navbar-link-active-color;
                    .box-shadow(0 -@navbar-link-underline-height
                                0 @navbar-link-active-underline inset);
                }
            }
        }

        // Only for small viewports.
        @media (max-width: @navbar-breakpoint-min) {

            margin: 1em 0;

            > li {
                a {
                    display: block;
                    padding: .5em 1em;

                    background: @navbar-background;
                    &:hover {
                        background: darken(@navbar-background, 10%);
                    }
                }

                &:not(:last-child) {
                    margin-bottom: 1px;
                }
            }
        }
    }

    // Always show menu for larger viewport.
    @media (min-width: @navbar-breakpoint-min) {
        &-menu.collapse {
            display: block;
        }
    }

    // User Menu
    // -------------------
    &-user-menu {
        &:extend(.nav);
        .pull-right();
        margin-top: 10px;

        &-login {
            padding-top: .3em;
            padding-bottom: .3em;
        }

        &-dropdown {
            &:extend(.dropdown);

            &-button {
                display: inline-block;
                padding: .3em .8em;
                background: @usermenu-button-bg;
                border-radius: @border-radius-base;

                &:hover {
                    background: @usermenu-button-hover-bg;
                }
            }

            &-list {
                &:extend(.dropdown-menu all);
                &:extend(.dropdown-menu-right all);

                vertical-align: middle;
                > li > a {
                    display: flex;
                    align-items: center;
                }

                .icon {
                    font-size: 1.5em;
                    margin-right: .4em;
                }

                text-shadow: none;
                .box-shadow(@dropdown-shadow);
            }

            &.open &-list {
                display: inline-block;
            }
        }
    }
}