.nav,
.nav .container {
    @extend %normalize_block;
    @extend %normalize_text;
    @extend %normalize_size;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 var(--nav-padding-horizontal);
    background-color: var(--var-bg-color);
    color: var(--var-text-color);
    z-index: $z-index-fixed;

    .navBrand { margin-right: var(--nav-other-margin-horizontal) !important; }
    .navOther { margin-left: var(--nav-other-margin-horizontal) !important; }

    .navLink,
    .navLink-center,
    .navLink-right {
        flex-grow: 1;
        list-style: none;
        display: inline-flex;
        margin: 0; 
        padding: 0;

        a.navItem, .navItem a {
            @extend %normalize_block;
            @extend %normalize_text;

            display: inline-flex;
            align-items: center;
            font-size: inherit;
            color: inherit;
            padding: var(--nav-link-padding-vertical) var(--nav-link-padding-horizontal);
            border-radius: var(--var-base-border-raduis);
        }

        a.navItem.active, .navItem.active a {
            font-weight: $font-weight-bold; 
        }
    }

    .navLink-center { justify-content: center }
    .navLink-right { justify-content: flex-end }
}