.uniformNav{
    --border-opacity: 1;
    --text-opacity: 1;
    --bg-opacity: 0;
    
    --hover-color: #{toRGB(color('blue'))};
    --active-color: #{toRGB(color('green-60'))};
    --color: #{toRGB(color('blue'))};
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: space-stretch;
    
    &.-nowrap{
        flex-wrap: nowrap;
    }
    
    & > * {
        --text-opacity: 1;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 0 1em;
        border-color: transparent;
        border-top-width: 2px;
        border-bottom-width: 2px;
        &.flex-fill{
            flex: 1 1 auto;
        }
    }
    & > a{
        text-decoration: none;
        color: rgba(var(--color), var(--text-opacity));
        &:hover{
            color: rgba(var(--hover-color), 1);
            border-left-color: rgba(var(--hover-color), var(--border-opacity));
            border-bottom-color: rgba(var(--hover-color), var(--border-opacity));
        }
        &.active{
            color: rgba(var(--active-color), 1);
            border-left-color: rgba(var(--active-color), 1);
            border-bottom-color: rgba(var(--active-color), 1);
        }
    }
    
    &.-pills{
        & > * {
            border: none;
            border-radius: 0.25em;
            padding: 0.25em 0.5em;
        }
        & > * + * {
            margin-left: 0.25em;
        }
        & > a {
            &:hover,
            &.active{
                --bg-opacity: 0.15;
                background-color: rgba(var(--hover-color), var(--bg-opacity));
            }
            &.active{
                background-color: rgba(var(--active-color), var(--bg-opacity));
            }
        }
    }

    &.-vertical{
        flex-direction: column;
        align-items: stretch;
        & > * {
            padding: 0.5em;
            border-top-width: 0;
            border-bottom-width: 0;
            border-left-width: 2px;
            border-right-width: 2px;
        }
        &.-pills{
            & > * + * {
                margin-left: 0;
                margin-top: 0.1em;
            }
        }
    }
}

@include color-rule('.uniformNav.-active') using ($color) {
    --active-color: #{toRGB($color)};
}
@include color-rule('.uniformNav.') using ($color) {
    --color: #{toRGB($color)};
}