/* Generated by tools/vendor-icons.py -- do not edit by hand.
   Icons: Phosphor Icons, MIT (https://phosphoricons.com). See THIRD-PARTY.md.

   Every glyph is currentColor, so an icon is the colour of the text it sits in and
   both themes come free. What is here is the size and the roles -- and the roles
   point at the tokens styles.css already tunes per theme, so a brandweer glyph is
   exactly the red the row's own rail is, without a media query of its own. */

/* `fill: currentColor` is the whole reason an icon has a colour at all. A <path>
   with no fill of its own falls back to SVG's default, which is black -- so every
   glyph in this app was painted #000 regardless of the text around it. On the light
   theme that passes for correct; on #0f1419 it is a glyph that is not there. It went
   unnoticed for as long as the set was duotone, because the backdrop path did carry
   `fill=currentColor` and a 30% wash of the right colour is dim but visible: what was
   being seen was the wash, never the drawing.

   The line box, not a pixel count, is what sizes it, so a glyph is the size of the
   text beside it -- which is what the emoji it replaces did for free. `em` all the
   way down means one rule serves the 11px status line and the 20px settings button
   alike.

   1.3 rather than 1.15: a glyph the exact height of a lowercase line reads as
   smaller than the text beside it, because the text has ascenders and stems where
   this has an outline. A shade over the line box is what makes the two look the
   same weight. */
.ico {
  fill: currentColor;
  width: 1.3em;
  height: 1.3em;
  flex: none;
  vertical-align: -.24em;
}

/* Bigger where the icon is the control rather than a mark beside a word. */
.ico.big { width: 1.6em; height: 1.6em; vertical-align: -.36em; }

/* The roles. An icon is one colour -- there is no backdrop any more -- so these set
   the whole glyph, pointing at the tokens styles.css already tunes per theme. */
.ico-fire      { color: var(--fire); }
.ico-ambulance { color: var(--ambulance); }
.ico-police    { color: var(--police); }
.ico-mixed     { color: var(--mixed); }
.ico-ok        { color: var(--prio-low); }
.ico-warn      { color: var(--prio-med); }
.ico-alert     { color: var(--prio-high); }
.ico-muted     { color: var(--muted); }