import { style } from "@vanilla-extract/css";
import { space } from "../../styles/tokens/spacing.ts";

export const wrapper = style({
  display: "inline-flex",
  alignItems: "center",
  gap: space[1],
  // Without this, the inline-flex's baseline is set by the InlineCode child,
  // which sits the whole group (favicon included) on the surrounding text's
  // baseline. The 16px favicon then protrudes above the cap-height of the
  // sibling text and the group reads as slightly floated. Centering on the
  // parent text's x-height midpoint puts the favicon visually in line.
  verticalAlign: "middle",
});

export const favicon = style({
  inlineSize: "16px",
  blockSize: "16px",
  flexShrink: 0,
  borderRadius: "2px",
});