import { style } from "@vanilla-extract/css";
import { vars } from "../../styles/theme.css.ts";
import { space } from "../../styles/tokens/spacing.ts";
import { fontFamily, fontSize } from "../../styles/tokens/typography.ts";
import { radii } from "../../styles/tokens/radii.ts";

export const codeBlock = style({
  fontFamily: fontFamily.mono,
  fontSize: fontSize.sm,
  backgroundColor: vars.color.code,
  color: vars.color.text,
  paddingBlock: space[3],
  paddingInline: space[4],
  borderRadius: radii.md,
  overflowX: "auto",
  whiteSpace: "pre-wrap",
  wordBreak: "break-all",
  border: `1px solid ${vars.color.borderSubtle}`,
});

export const inlineCode = style({
  fontFamily: fontFamily.mono,
  fontSize: "0.875em",
  // Always read as neutral Midnight code, even inside a link (NSID codes are
  // often wrapped in anchors); do not inherit the Infrared link color.
  color: vars.color.text,
  backgroundColor: vars.color.code,
  paddingInline: "6px",
  paddingBlock: "2px",
  borderRadius: radii.sm,
  overflowWrap: "anywhere",
});