From 3fb8910ba17eb80d183b86ec3823b99d6d38d0f1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 29 Apr 2024 12:23:11 -0400
Subject: [PATCH] fix code block and copy styles

---
 docs/assets/styles/code-examples.css  | 10 ----------
 docs/docs/experimental/style-guide.md |  5 +++++
 src/themes/applied.css                | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/docs/assets/styles/code-examples.css b/docs/assets/styles/code-examples.css
index 74678cace..8b4319cc8 100644
--- a/docs/assets/styles/code-examples.css
+++ b/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)) {
diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md
index 5a69eb274..3004c7a48 100644
--- a/docs/docs/experimental/style-guide.md
+++ b/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>
diff --git a/src/themes/applied.css b/src/themes/applied.css
index 1ba42f7fd..5fa9fd771 100644
--- a/src/themes/applied.css
+++ b/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: