/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
<!--section:code-->
```css */
a:not(.does-not-exist) /* soft win specificity over Pico's `a[role="button"]` and inner `img:not([height])` */ {
  /* Use inline flex only if link contains an icon */
  &:has(> i) {
    display: inline-flex;
    gap: 0.375ch; /* =3/8 */
    text-wrap: balance;
    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
  }
  > i {
    font-style: normal;
    float: left; /*                 ✅ Chrome ❌ Safari */
    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */

    /* Favicons */
    > img {
      height: 1.25em;
      margin-block-start: calc(-0.25em / 2);
      max-width: none; /* to keep ratio safe */
      display: inline-block; /* for Tailwind CSS Typography */
    }

    /* Font Awesome */
    &[class^="fa-"],
    &[class*=" fa-"] {
      line-height: inherit;
      --fa-width: auto;
    }
    &.fa-lg {
      line-height: normal;
    }
  }
}
/*```
<!--section:summary-->

Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
It automatically handles sizing and alignment while preventing underline on icons.

<!--section:docs-->

<article class="breakout-item">

| Use `<i>`-helper with                                                                 | Clean HTML without `<span>ning`      |
| ------------------------------------------------------------------------------------- | ------------------------------------ |
| [<i>🥷</i> Emojis](#)                                                                 | `<a><i>🥷</i> Text</a>`              |
| [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#)                     | `<a><i class="fa-..."></i> Text</a>` |
</article>

Or even for:

<article>
  <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
</article>

How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237

**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons

<!--section--> */