@mixin uniformNav-vertical(){
    flex-direction: column;
    align-items: stretch;
    & > * {
        padding: 0.5em 0.5em;
    }
    & > a{
        border: none !important; // TODO remove !important
        padding-bottom: 0.5em !important; // TODO remove !important
        &:hover{
            color: color('blue');
            background: rgba(black, 0.05);
        }
        &.active{
            color: white;
            background: color('green');
        }
    }
}

.uniformNav{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: space-stretch;
    
    &.-nowrap{
        flex-wrap: nowrap;
    }
    
    & > * {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 0 1em;
        border-style: solid none;
        border-color: transparent;
        border-top-width: 2px;
        border-bottom-width: 2px;
        &.col-fill{
            flex: 1 1 auto;
        }
    }
    & > a{
        text-decoration: none;
        &:hover{
            color: color('blue');
            border-bottom-color: color('blue');
        }
        &.active{
            color: color('green-dark');
            border-bottom-color: color('green-dark');
        }
    }
    &.-pad{
        & > * {
            padding-top: 0.25em;
            padding-bottom: 0.25em;
        }
    }
    &.-pad-more{
        & > * {
            padding-top: 0.5em;
            padding-bottom: 0.5em;
        }
    }
    
    &.-vertical{
        @include uniformNav-vertical();
    }
}

.uniformMainNav{
    position: relative;
    background: white;
    box-shadow:0 1px 0 0 rgba(black, 0.15);
    color: color('gray');
    .uniformNav{
        & > * {
            padding-top: 0.25em;
            padding-bottom: 0.25em;
        }
    }
    
    &.bg-none{
        background: none;
    }
    
    &.border-bottom-none,
    &.border-none{
        box-shadow: none;
    }
    
    &.-vertical{
        box-shadow: none;
        .uniformNav{
            @include uniformNav-vertical();
        }
    }
    
    &.-invert{
        box-shadow:0 1px 0 0 rgba(white, 0.15);
        background: none;
        color: rgba(white, 0.7);
        .uniformNav{
            & > a {
                color: rgba(white, 0.7);
                &:hover{
                    color: white;
                    border-bottom-color: color('blue-bright');
                }
                &.active{
                    color: white;
                    background: rgba(black, 0.1);
                    border-bottom-color: color('green-light');
                }
            }
        }
        &.border-bottom-none,
        &.border-none{
            box-shadow: none;
        }
    }
}