[material-ui][Badge] Use inline CSS variables for anchorOrigin/overlap positioning

[siriwatknp]

Follow-up to #47742.

Instead of computing positioning via a style: ({ ownerState }) => {...} callback in the styled variants array, this PR:

• Replaces the callback with a plain object that references CSS variables.
• Moves the anchorOrigin × overlap conditional logic onto the badge slot's inline style, which sets those CSS variables.

Why

• Keeps the styled variants purely declarative (plain objects only).
• Pushes per-render conditional logic out of the styled engine — cheaper at render time and easier for static extraction tools.

Variables

Three CSS variables drive positioning, leveraging existing CSS shorthand:

• --Badge-translate — translateX, translateY (comma-separated, for the translate() function)
• --Badge-inset — top right bottom left (space-separated, for the inset shorthand)
• --Badge-origin — X Y (space-separated, for transform-origin)

Follows the same "inline-style sets a --ComponentName-* variable, styled CSS consumes it" pattern already used by:

• AvatarGroup — --AvatarGroup-spacing (from the spacing prop)
• Typography — --Typography-textAlign (from the align prop)
• TabScrollButton — --TabScrollButton-svgRotate (from RTL + orientation)

Behavior

No visible change. Same eight outcomes (top/bottom × left/right × rectangular/circular) produce the same CSS output as before #47742.

[code-infra-dashboard]

Deploy preview

https://deploy-preview-48549--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	▼-15B(0.00%)	🔺+22B(+0.01%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[github-actions]

Cherry-pick PRs will be created targeting branches: v7.x