/* ==========================================================================
   EZUI Icon (ezui-icon)

   One drawing per icon, written once and reused by name. A page writes
   <span class="ezui-icon" data-icon="calendar"></span> and ezui-icon.js
   puts the drawing in.

   Every icon is drawn on a 24 x 24 grid and takes its colour from the text
   around it (currentColor). Size comes from --ezui-icon-size, 1em by
   default, so an icon in a line of text matches that text. Line weight
   comes from --ezui-icon-stroke, set per size (see the guide).

   Self-contained: no tokens from anywhere else, no dependencies.
   ========================================================================== */

.ezui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* The fallbacks are the defaults, rather than tokens declared here: a
     value declared on .ezui-icon would shadow one set by a component
     around it, so a button could not size or weight its own icons.
     1em lands on whatever text the icon sits in, usually 12.5 to 15px,
     and 2.29 is the weight for the middle of that range. */
  width: var(--ezui-icon-size, 1em);
  height: var(--ezui-icon-size, 1em);
  color: inherit;
  /* Sits an icon on the text baseline rather than hanging it below. */
  vertical-align: -0.145em;
}

/* Fixed sizes. The first three are the ezui-field / ezui-button icon
   sizes, so an icon in a page lines up with one inside a field. Each
   stroke is 1.125 + 15.75 / size: see "Line weight" in the guide. */
.ezui-icon[data-size="s"]  { --ezui-icon-size: 14px; --ezui-icon-stroke: 2.25; }
.ezui-icon[data-size="m"]  { --ezui-icon-size: 16px; --ezui-icon-stroke: 2.11; }
.ezui-icon[data-size="l"]  { --ezui-icon-size: 18px; --ezui-icon-stroke: 2; }
.ezui-icon[data-size="xl"] { --ezui-icon-size: 20px; --ezui-icon-stroke: 1.91; }

.ezui-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: var(--ezui-icon-stroke, 2.29);
}

/* An unknown name leaves the box empty rather than breaking the layout.
   The attribute is set by the JS so a wrong name can be found in the
   inspector. */
.ezui-icon[data-icon-missing] { visibility: hidden; }