Bars

<div class="nav-bar">
  <div class="nav-bar_inner">
    <a class="nav-bar_logo" href="#">
      <img class="placeholder" />
    </a>
    <div>
      <button class="nav-bar_toggle">
        <svg><use xlink:href="#menu" /></svg>
      </button>
      <div class="nav-bar_content">
        <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>
      </div>
    </div>
  </div>
</div>

Template

@mixin barVariables
/*  1. bg colour ........... */ var(--bar-bg-color),
/*  2. text colour ......... */ var(--bar-text-color),
/*  3. h padding ........... */ 2rem,
/*  4. v padding ........... */ 1rem,
/*  5. toggle width ........ */ 2rem,
/*  6. toggle height ....... */ 2rem,
/*  7. toggle padding ...... */ 0,
/*  8. toggle bg ........... */ var(--bar-bg-color),
/*  9. toggle color ........ */ white,
/* 10. toggle border width . */ 0,
/* 11. toggle border color . */ var(--bar-bg-color),
/* 12. logo height ......... */ var(--bar-logo-height),
/* 13. inner max width ..... */ var(--bar-max-width),
/* 14. break point ......... */ var(--bar-break-point);

@mixin barSelectors
/*  1. container ........... */ .nav-bar,
/*  2. inner ............... */ .nav-bar_inner,
/*  3. logo ................ */ .nav-bar_logo,
/*  4. content ............. */ .nav-bar_content,
/*  5. toggle .............. */ .nav-bar_toggle;