/* .icon overrides base/globals.css's `svg { height: 2ex; width: auto }`.
   `cap` is required (Safari 17.2+). On an engine without it the declaration is
   dropped and the size falls back to auto; do not add a fallback line — it
   would be dead in every supported browser. */
.icon {
  inline-size: var(--icon-size, 1cap);
  block-size: var(--icon-size, 1cap);
}

.icon.with-lower-case {
  inline-size: var(--icon-size, 1ex);
  block-size: var(--icon-size, 1ex);
}

/* --with-icon-space is registered non-inheriting, so it must be set ON the
   .with-icon itself (set on an ancestor it does nothing), and a nested
   .with-icon keeps its own spacing. To space a whole subtree, use the bare
   --space: it is kept for compatibility and still inherits.
   "*" with no initial value: a relative initial-value (0.5em) is not
   computationally independent, so the spec makes every browser drop the rule
   (see cluster.css). */
@property --with-icon-space {
  syntax: "*";
  inherits: false;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
  gap: var(--with-icon-space, var(--space, 0.5em));
}