/* ============================================================================
   Components - Icons
   system/components/icons.css

   FontAwesome Free v7. No emoji. See decisions/0004-icons-fontawesome.md
   and rules/icons.md.

   This file ships size and color helpers ONLY. The FA font + CSS pack is
   pulled in by each consumer product (@fortawesome/fontawesome-free v7).
   ============================================================================ */

/* Icon wrapper. Works as a span around an <i class="fa-solid fa-X"> or
   directly on the <i> itself. Sets color via currentColor so the status
   helpers below can retint. */
.gm .gm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  line-height: 1;
}

/* Sizes - drive font-size so FA glyphs scale. 1em wide = font-size wide. */
.gm .gm-icon-xs  { font-size: 16px; }
.gm .gm-icon-sm  { font-size: 20px; }
.gm .gm-icon-md  { font-size: 24px; }
.gm .gm-icon-lg  { font-size: 32px; }
.gm .gm-icon-xl  { font-size: 48px; }
.gm .gm-icon-2xl { font-size: 64px; }
.gm .gm-icon-hero { font-size: 96px; }   /* success screens, onboarding */

/* Status colors */
.gm .gm-icon-ok    { color: var(--gm-success); }
.gm .gm-icon-warn  { color: var(--gm-warning); }
.gm .gm-icon-error { color: var(--gm-danger); }
.gm .gm-icon-info  { color: var(--gm-info); }
.gm .gm-icon-muted { color: var(--gm-text-muted); }