/* Icons. `icon(name)` returns an inline `<svg class="icon">` with its size on
   the width and height attributes and `stroke="currentColor"`, so almost
   everything about an icon is already right without a stylesheet.

   This file exists for the three things that are not, each of which shows up
   only when an icon sits next to text or inside a flex row. It is small on
   purpose: an icon that needs rules to look correct in a particular place
   should get them from that place, not from here.

   It also stops `ensureCss('/app/ui/icon/icon.css')` resolving to the SPA
   fallback. The server answers any unmatched GET with index.html at status
   200, so a missing component stylesheet produces no 404, no console error
   and no failed request: the browser simply declines to apply an HTML
   document as a stylesheet and nothing anywhere says so. See
   agent_UI-fixes.md. */

@layer components {
  .icon {
    /* The reset sets `display: block` on every svg, which is right for an
       image and wrong for a glyph sitting on a line of text. */
    display: inline-block;
    /* Optical, not geometric. A 20px box on a 14px line sits low against the
       cap height; -0.125em is the offset that puts a stroke icon's centre on
       the text's centre. */
    vertical-align: -0.125em;
    /* An icon never absorbs the shrink a flex row applies to its text. */
    flex: 0 0 auto;
    /* Two decorative rounding artefacts a 2px stroke shows at small sizes. */
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}