@layer components {
  /* Icons: Streamline Sharp line set, sized to the text they sit beside. */
  .icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .nav-link, .tool, .phone-hangup, .dock-tab, .toggle, .issue.is-clean { display: inline-flex; align-items: center; gap: .5rem; }
  .nav-link .icon, .tool .icon { color: var(--ink-3); }
  .nav-link:hover .icon, .tool:hover .icon { color: currentColor; }
  .btn .icon { width: 1.1em; height: 1.1em; }
  .group > legend .icon { margin-right: .6rem; color: var(--ink-3); }
}