When using a standard anchor tag, incorrect padding-left is applied for sublists that use the nav-sublist mixin.

It looks like this issue was introduced in #3838. Order of precedence causes the padding specified by a:not(.usa-button), inside the nav-list mixin, to replace the padding-left specified by the nav-sublist mixin.

Steps to reproduce the bug

1. Create a sidebar with one or more sublists like:

<nav aria-label="Secondary navigation">
    <ul class="usa-sidenav">
        <li class="usa-sidenav__item">
            <a href="">Parent link</a>
        </li><li class="usa-sidenav__item">
        <a href="" class="usa-current">Current page</a><ul class="usa-sidenav__sublist">
        <li class="usa-sidenav__item">
            <a href="">Child link</a>
        </li><li class="usa-sidenav__item">
        <a href="">Child link</a>
    </li><li class="usa-sidenav__item">
        <a href="">Child link</a>
    </li><li class="usa-sidenav__item">
        <a href="">Child link</a>
    </li><li class="usa-sidenav__item">
        <a href="" class="usa-current">Child link</a>
    </li>
    </ul>
    </li><li class="usa-sidenav__item">
        <a href="">Parent link</a>
    </li>
    </ul>
</nav>

2. Inspect the padding-left for any of the .usa-sidenav__sublist a anchor tags. (i.e. the anchor tag for the first "Child link")
3. You will see that padding from .usa-sidenav a:not(.usa-button) is replacing the padding-left from .usa-sidenav__sublist a

Expected behavior

The first "Child link" anchor tag should have padding-left value that indents it to the right. (i.e. padding-left: 2rem)

You can see the issue on https://designsystem.digital.gov/components/sidenav/

Screenshots

Expected results:

Results after #3838:

System setup

• USWDS version: 2.10.0
• Browser and version: Chrome 87.0

Possible solution

In the nav-sublist mixin, change the a { ... } selectors, for the multiple levels, to be a:not(.usa-button) { ... }