.uiIcon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 auto;
  color:currentColor;
  vertical-align:middle;
  pointer-events:none;
}

.uiIcon use{
  vector-effect:non-scaling-stroke;
}

.uiIcon--sm{
  width:16px;
  height:16px;
}

.uiIcon--md{
  width:20px;
  height:20px;
}

.uiIcon--lg{
  width:22px;
  height:22px;
}

.uiIcon--xl{
  width:28px;
  height:28px;
}

.uiIconWrap{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

body.theme-light .uiIconWrap,
html[data-theme="light"] .uiIconWrap{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.58), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  border-color:rgba(8,18,15,.08);
}

.uiIconWrap--accent{
  color:var(--primary, #30d158);
  border-color:color-mix(in srgb, var(--primary, #30d158) 26%, rgba(255,255,255,.10));
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.20), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary, #30d158) 14%, rgba(255,255,255,.06)), rgba(255,255,255,.03));
}

.iconLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.iconOnly{
  font-size:0 !important;
  color:inherit;
}