/* Lagos Life icons: SVG glyphs, emoji, emoji circles and tiles.
   Owner: 5b. Spec: site/icons.html, 05-sections/5b-layout.md section 10.

   Glyphs: inline SVG on a 24x24 viewBox, outline, round caps and joins, currentColor.
     <svg class="ll-icon ll-icon--sm" viewBox="0 0 24 24" aria-hidden="true" focusable="false">...</svg>
   One stroke per size: xs 14px / 2.6, sm 16px / 2.4, md 20px / 2.2, lg 24px / 2.
   Emoji: the app's existing .ll-emoji class sets the system emoji stack.
     Next to a word:   <span class="ll-emoji" aria-hidden="true">🍛</span> Hunger
     On its own:       <span class="ll-emoji" role="img" aria-label="Hunger">🍛</span> */

.ll-icon {
  display: inline-block;
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-sm);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ll-icon--xs { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-xs); }
.ll-icon--md { width: var(--icon-md); height: var(--icon-md); stroke-width: var(--icon-stroke-md); }
.ll-icon--lg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: var(--icon-stroke-lg); }

.ll-emoji { font-family: var(--font-emoji); font-style: normal; line-height: 1; }

/* Emoji circle: people, needs, places and sheet headers. Default md (36px circle, 20px emoji). */
.ll-emoji-circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--emoji-circle-md);
  height: var(--emoji-circle-md);
  border-radius: 50%;
  background: var(--mist);
  font-family: var(--font-emoji);
  font-size: var(--emoji-md);
  line-height: 1;
}
.ll-emoji-circle--sm { width: var(--emoji-circle-sm); height: var(--emoji-circle-sm); font-size: var(--emoji-sm); }
.ll-emoji-circle--lg { width: var(--emoji-circle-lg); height: var(--emoji-circle-lg); font-size: var(--emoji-lg); }
/* On a white surface in Light (sheet header on paper) the circle is mist; on mist it is paper. */
.ll-emoji-circle--on-mist { background: var(--paper); }
/* Over the world (map pins): glass, so it reads on grass, water and roads. */
.ll-emoji-circle--world { background: var(--surface-glass-panel); box-shadow: var(--shadow-flat); }

/* Emoji tile: the in-game phone's app tile. Background colour belongs to the app (5d, phone). */
.ll-emoji-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--emoji-tile);
  height: var(--emoji-tile);
  border-radius: var(--radius-tile);
  background: var(--mist);
  font-family: var(--font-emoji);
  font-size: var(--emoji-xl);
  line-height: 1;
}