fix code block and copy styles

docs/assets/styles/code-examples.css

@@ -32,19 +32,9 @@
 
 .code-example-source pre {
   position: relative;
-  background-color: var(--wa-color-neutral-fill-subtle);
   border-radius: 0;
-  padding: 0;
   margin: 0;
   white-space: normal;
-
-  code {
-    display: block;
-    background-color: transparent;
-    padding: var(--wa-space-m);
-    white-space: pre;
-    overflow-x: auto;
-  }
 }
 
 .code-example-source:not(:has(+ .code-example-buttons)) {

docs/docs/experimental/style-guide.md

@@ -20,6 +20,11 @@ Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci.
 
 ## Inline Text
 
+```html
+
+Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
+```
+
 <div class="docs-grid">
   <p><strong>Bold</strong></p>
   <p><em>Italics</em></p>

src/themes/applied.css

@@ -209,6 +209,21 @@ pre {
   white-space: pre;
 }
 
+pre:has(code) {
+  position: relative;
+  padding: 0;
+  white-space: normal;
+
+  code {
+    display: block;
+    font-size: 1em;
+    background-color: transparent;
+    padding: var(--wa-space-m);
+    white-space: pre;
+    overflow-x: auto;
+  }
+}
+
 kbd {
   border: solid 1px var(--wa-color-neutral-border-subtle);
   box-shadow: