:root{
  --bl-icon-muted: var(--text-muted, #64748b);
  --bl-icon-soft: var(--text-soft, #334155);
  --bl-icon-strong: currentColor;
}

.bl-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  vertical-align:-0.125em;
  font-size:var(--bl-icon-size,16px);
}

.bl-icon-svg{
  width: var(--bl-icon-size, 16px);
  height: var(--bl-icon-size, 16px);
  display: inline-block;
  vertical-align: -0.125em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.bl-icon-16{--bl-icon-size:16px}
.bl-icon-20{--bl-icon-size:20px}
.bl-icon-24{--bl-icon-size:24px}
.bl-icon-32{--bl-icon-size:32px}

.bl-icon-muted{color:var(--bl-icon-muted)}
.bl-icon-soft{color:var(--bl-icon-soft)}
.bl-icon-strong{color:var(--bl-icon-strong)}