/**
 * A frame, like `brand-flame` under it: the caller gives the box, the mark fills it.
 *
 * `color` is passed through because that is the flame's ink — the mark follows the theme without
 * knowing a theme exists — and `line-height: 0` keeps a canvas from sitting on a text baseline.
 */
site-icon {
  display: block;
  color: var(--text);
  line-height: 0;
}

/**
 * Whatever the mark is actually drawn with, at the size the call site asked for.
 *
 * The child rather than the tag, because the child is what changes: core's canvas here, an `svg-img`
 * or an `<img>` in a project that has registered its own. Without this the box is sized and its
 * contents are not — a canvas with no height resolves to `auto` and collapses — which is the whole
 * failure mode this element exists to make impossible. Call sites size `site-icon`; nothing below it
 * needs restating.
 */
site-icon > * {
  display: block;
  width: 100%;
  height: 100%;
}

/* Nothing to wireframe: the mark is decoration, and a grey box in its place says less than the mark
   itself. Matches `brand-flame[skeleton]`, which this defers to when the flame is what is inside. */
site-icon[skeleton] {
  opacity: 0.35;
}