.source-icon{
  width:16px;
  height:16px;
  display:block;
  color:currentColor;
}
.icon-badge{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  vertical-align:-4px;
}
.icon-badge .source-icon{width:12px;height:12px;}
.icon-badge.imports{background:rgba(168,85,247,.14); box-shadow:0 0 8px rgba(168,85,247,.28); color:#c084fc;}
.icon-badge.wind{background:rgba(16,185,129,.14); box-shadow:0 0 8px rgba(16,185,129,.24); color:#34d399;}
.icon-badge.solar{background:rgba(245,158,11,.14); box-shadow:0 0 8px rgba(245,158,11,.24); color:#fbbf24;}
.icon-badge.hydro{background:rgba(6,182,212,.14); box-shadow:0 0 8px rgba(6,182,212,.24); color:#22d3ee;}
.icon-badge.other{background:rgba(249,115,22,.14); box-shadow:0 0 8px rgba(249,115,22,.24); color:#fb923c;}
.icon-badge.nuclear{background:rgba(203,213,225,.12); box-shadow:0 0 8px rgba(203,213,225,.18); color:#e2e8f0;}
.icon-badge.gas{background:rgba(59,130,246,.14); box-shadow:0 0 8px rgba(59,130,246,.24); color:#60a5fa;}
.icon-badge.biomass{background:rgba(132,204,22,.14); box-shadow:0 0 8px rgba(132,204,22,.24); color:#a3e635;}
.icon-badge.coal{background:rgba(107,114,128,.18); box-shadow:0 0 8px rgba(107,114,128,.18); color:#cbd5e1;}
.flow-name.with-icon,.mix-card-title.with-icon{display:flex;align-items:center;}
.mix-card-title.with-icon{gap:8px;}
.mix-card-title.with-icon .icon-badge{margin-right:0;}