From 3a23e4847375bbc675ce2e1fdfdb9a4cc8cdec5f Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Sun, 19 Oct 2025 16:25:20 -0400
Subject: [PATCH] Fix copy code button styles (#1627)

---
 .../webawesome/docs/assets/styles/copy-code.css | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/webawesome/docs/assets/styles/copy-code.css b/packages/webawesome/docs/assets/styles/copy-code.css
index 4aad6afe2..abfd6f0ea 100644
--- a/packages/webawesome/docs/assets/styles/copy-code.css
+++ b/packages/webawesome/docs/assets/styles/copy-code.css
@@ -15,24 +15,25 @@ pre[id*='code-block-']:has(code) {
 }
 
 wa-copy-button.copy-button {
-  --background-color: var(--wa-color-gray-20);
-  --background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
   position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
+  top: 0.5rem;
+  right: 0.5rem;
   font-family: var(--wa-font-family-body);
-  color: var(--wa-color-gray-80);
+  font-size: var(--wa-font-size-m);
+  color: white;
   border-radius: var(--wa-border-radius-m);
-  padding: 0.25rem;
 
   &::part(button) {
-    background: transparent;
+    aspect-ratio: 1;
+    background-color: var(--wa-color-neutral-20);
     cursor: copy;
   }
 
   @media (hover: hover) {
     &:hover {
-      color: white;
+      &::part(button) {
+        background-color: var(--wa-color-neutral-30);
+      }
     }
   }