Dropdowns

<a class="button" id="dropdown-button" href="#" aria-haspopup="true">Dropdown <svg class="button_icon" data-location="after"><use xlink:href="#caret-down" /></svg></a>
<ul class="dropdown" aria-labelledby="dropdown-button">
  <li>
    <a href="#" class="dropdown_link">Dropdown link</a>
  </li>
  <li>
    <a href="#" class="dropdown_link" aria-current="page">Active link</a>
  </li>
  <li>
    <a href="#" class="dropdown_link">Dropdown link</a>
  </li>
</ul>

Template

@mixin dropdownVariables
/*  1. bg color ............. */  var(--dropdown-bg-color),
/*  2. text color ........... */  var(--dropdown-text-color),
/*  3. border width ......... */  var(--dropdown-border-width),
/*  4. border color ......... */  var(--dropdown-border-color),
/*  5. dropdown offset ...... */  var(--dropdown-offset),
/*  6. arrow size ........... */  var(--dropdown-arrow-size),
/*  7. box shadow ........... */  var(--dropdown-box-shadow),
/*  8. link color ........... */  var(--dropdown-link-color),
/*  9. font weight .......... */  var(--dropdown-link-font-weight),
/* 10. focus outline wwidth . */  var(--dropdown-link-focus-outline-width),
/* 11. focus outline offset . */  var(--dropdown-link-focus-outline-offset),
/* 12. focus outline blur ... */  var(--dropdown-link-focus-outline-blur),
/* 13. focus outline opacity  */  var(--dropdown-link-focus-outline-opacity),
/* 14. focus outline color .. */  var(--dropdown-link-focus-outline-color),
/* 15. active bg color ...... */  var(--dropdown-link-active-bg-color),
/* 16. active text color .... */  var(--dropdown-link-active-text-color),
/* 17. active focus color ... */  var(--dropdown-link-active-focus-outline-color),
/* 18. group border width ... */  var(--dropdown-group-border-width),
/* 19. group border color ... */  var(--dropdown-group-border-color),
/* 20. font family .......... */  var(--dropdown-font-family);

@mixin dropdownSelectors
/*  1. dropdown-content ..... */  .dropdown,
/*  2. dropdown item ........ */  .dropdown_item,
/*  3. new group modifier ... */  [data-group-item="1"],
/*  4. dropdown_link ........ */  .dropdown_link,
/*  5. link-active-modifier . */  [aria-current];