.icon {
  flex: none;
  display: block;
}

.mono {
  color: var(--icon-color, currentColor);
}

/* Coloured icons carry both variants; the light one shows only in the light theme. */
.light {
  display: none;
}

:global(:root[data-theme="light"]) .light {
  display: inline;
}

:global(:root[data-theme="light"]) .dark {
  display: none;
}

.symbol {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  line-height: 1;
  color: var(--fg-subtle);
}