Navs

<ul class="top-nav">
  <li>
    <a class="top-nav_link" href="#">Link</a>
  </li>
  <li>
    <a class="top-nav_link" href="#">Link</a>
  </li>
</ul>

Template

@mixin navVariables
/*  1. bg color ............ */ var(--nav-bg-color),
/*  2. link color .......... */ var(--nav-link-color),
/*  3. link bg ............. */ var(--nav-link-bg),
/*  4. link border width ... */ 0,
/*  5. link border color ... */ var(--component-main-color),
/*  3. link h padding ...... */ 1em,
/*  4. link v padding ...... */ 0.5em,
/*  5. horizontal at ....... */ var(--nav-break-point);

@mixin navSelectors
/*  1. container ........... */ .top-nav,
/*  2. logo ................ */ .top-nav_item,
/*  3. content ............. */ .top-nav_link;