:root {
  --icon-primary: var(--key, var(--stem-blue, #2563eb));
  --icon-muted: var(--text-muted, var(--stem-text-secondary, #64748b));
  --icon-subtle: color-mix(in srgb, var(--icon-muted) 56%, transparent);
  --icon-success: var(--stem-success, #10b981);
  --icon-warning: var(--stem-warning, #f59e0b);
  --icon-danger: var(--stem-danger, #ef4444);
  --icon-info: var(--stem-info, #3b82f6);
  --icon-ai: #8b5cf6;
  --icon-money: #0f9f6e;
  --icon-health: #ef4770;
  --icon-public: #2563eb;
  --icon-creative: #d946ef;
}

.stem-icon {
  display: inline-flex;
  width: 1.25em;
  height: 1.25em;
  color: currentColor;
  vertical-align: -0.18em;
  flex: 0 0 auto;
}

.stem-icon svg,
svg.stem-icon {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.stem-icon--16 { width: 16px; height: 16px; }
.stem-icon--20 { width: 20px; height: 20px; }
.stem-icon--24 { width: 24px; height: 24px; }
.stem-icon--32 { width: 32px; height: 32px; }
.stem-icon--40 { width: 40px; height: 40px; }
.stem-icon--64 { width: 64px; height: 64px; }
.stem-icon--80 { width: 80px; height: 80px; }

.stem-icon--primary { color: var(--icon-primary); }
.stem-icon--muted { color: var(--icon-muted); }
.stem-icon--success { color: var(--icon-success); }
.stem-icon--warning { color: var(--icon-warning); }
.stem-icon--danger { color: var(--icon-danger); }
.stem-icon--info { color: var(--icon-info); }
.stem-icon--ai { color: var(--icon-ai); }
.stem-icon--money { color: var(--icon-money); }
.stem-icon--health { color: var(--icon-health); }
.stem-icon--public { color: var(--icon-public); }
.stem-icon--creative { color: var(--icon-creative); }

.stem-icon-replaced {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stem-icon-inline {
  margin-inline-end: .35em;
}

.stem-icon-inline-after {
  display: inline;
}