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

.navigation {

    // General styling (for all viewport widths)
    @include clearfix();
    @extend .container;

    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 {
        @extend .button;
        @include button-variant(white, #242424);
        margin-top: 8px;
        font-size: 24px;

        // Hide for larger view-ports.
		@include media-breakpoint-up(md) {
			@include visually-hidden;
		}
    }

    // Menu
    // -------------------
    &-menu ul {
        @extend .nav;

        > li {

            // Inline list for larger viewports.
			@include media-breakpoint-up(md) {
                display: inline-block;

                a {
                    display: block;
					margin: 4px calc($navbar-link-spacing / 2);
                    padding: $navbar-link-vertical-spacing 10px $navbar-link-vertical-spacing;

                    &: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.
        @include media-breakpoint-down(md) {

            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.

    @include media-breakpoint-up(md) {
        &-menu.collapse {
            display: block;
        }
    }

    // User Menu
    // -------------------
    &-user-menu {
        @extend .nav, .float-end;
        margin-top: 10px;

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

        &-dropdown {
            position: relative;

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

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

            &-list {
                @extend .dropdown-menu;
                @extend .dropdown-menu-right;

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

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

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

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