Replace style with css prop in CSP package (#202013)

## Summary

Part of the resolution of this issue: 
- https://github.com/elastic/kibana/issues/149246

Removes the `style` prop in React components and elements to avoid using
inline styles. Instead, it uses now the `emotion.css` prop to
dynamically attach all styles to the native `class` attribute.

### Motivation

Using inline styles at scale causes a performance penalty at rendering
time. It's way more efficient to attach styles to a single or several
classnames instead.

### Screenshots

<details><summary>Default Edge</summary>
<img width="1028" alt="Screenshot 2024-12-02 at 16 27 47"
src="https://github.com/user-attachments/assets/4c913a69-ee26-4cda-829c-2b26799ead81">

</details> 

<details><summary>Graph Popovers</summary>
<img width="175" alt="Screenshot 2024-12-02 at 16 27 57"
src="https://github.com/user-attachments/assets/55054b05-9cb4-4ca7-a19a-319277d7961d">

</details> 

<details><summary>Graph Stacked Edge Cases</summary>
<img width="1319" alt="Screenshot 2024-12-02 at 16 28 03"
src="https://github.com/user-attachments/assets/11ec7a03-e8cf-4090-9443-56288bf78a2c">
</details> 


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

- Minor risk with low impact and severity:
- Only risk is CSP graph nodes showing with a different background and
border

x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx

@@ -49,6 +49,8 @@ export function DefaultEdge({
         path={edgePath}
         style={{
           stroke: euiTheme.colors[color],
+        }}
+        css={{
           strokeDasharray: '2,2',
         }}
         markerEnd={

x-pack/packages/kbn-cloud-security-posture/graph/src/components/edge/styles.tsx

@@ -128,7 +128,7 @@ export const SvgDefsMarker = () => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <svg css={{ position: 'absolute', width: 0, height: 0 }}>
       <defs>
         <Marker id="primary" color={euiTheme.colors.primary} />
         <Marker id="danger" color={euiTheme.colors.danger} />

x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/edge_group_node.tsx

@@ -16,7 +16,7 @@ export const EdgeGroupNode: React.FC<NodeProps> = memo((props: NodeProps) => {
     <>
       <NodeResizeControl
         position="right"
-        style={{ borderColor: 'transparent', background: 'transparent' }}
+        css={{ borderColor: 'transparent', background: 'transparent' }}
       >
         <Handle
           type="target"

x-pack/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx

@@ -177,7 +177,7 @@ export const NodeIcon = ({ icon, color, x, y }: NodeIconProps) => {
   return (
     <foreignObject x={x} y={y} width="50" height="50">
       <div
-        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
+        css={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
       >
         <EuiIcon type={getSpanIcon(icon) ?? icon} size="l" color={color ?? 'primary'} />
       </div>