.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 em(12);
    background-color: var(--var-bg-color);
    color: var(--var-text-color);
    z-index: $z-index-fixed;

    .nav-brand { margin: 0 20px 0 0; }

    .nav-link,
    .nav-link-center,
    .nav-link-right {
        flex-grow: 1;
        list-style: none;
        display: inline-flex;
        margin: 0 em(6); 
        padding: 0;

        a.nav-item, .nav-item a {
            @extend %normalize_block;
            @extend %normalize_text;

            display: inline-flex;
            align-items: center;
            font-size: inherit;
            color: inherit;
            padding: em(18) em(6);
            border-radius: $base-border-radius;
        }

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

    .nav-link-center{ justify-content: center }
    .nav-link-right{ justify-content: flex-end }
}