From b443fe21700a2a514f9aa24bc291be34e8bd370c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Wed, 22 May 2024 20:33:18 +0300
Subject: [PATCH] fix(code-block): button styles (#1566)

* fix(code-block): button styles

fixes #1541

* fix(code-block): styles
---
 .changeset/spicy-planes-lead.md          |  4 ++
 elements/rh-code-block/rh-code-block.css | 56 ++++++++++++------------
 2 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/spicy-planes-lead.md

diff --git a/.changeset/spicy-planes-lead.md b/.changeset/spicy-planes-lead.md
new file mode 100644
index 0000000000..9c47cff405
--- /dev/null
+++ b/.changeset/spicy-planes-lead.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-code-block>`: corrected 'show more' button styles
diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
index fefcf12ab0..2b6167bbd4 100644
--- a/elements/rh-code-block/rh-code-block.css
+++ b/elements/rh-code-block/rh-code-block.css
@@ -35,25 +35,25 @@
   border-radius: var(--rh-border-radius-default, 3px);
   width: var(--rh-length-3xl, 48px);
   height: var(--rh-length-3xl, 48px);
+}
+
+.shadow-fab:is(:hover, :focus, :active) {
+  background:
+    var(
+        --_code-action-hover-focus-active-background,
+        var(--rh-color-surface-light, #e0e0e0)
+      );
+}
 
-  &:is(:hover, :focus, :active) {
-    background:
-      var(
-          --_code-action-hover-focus-active-background,
-          var(--rh-color-surface-light, #e0e0e0)
-        );
-  }
-
-  & svg {
-    width: var(--rh-size-icon-02, 24px);
-    height: var(--rh-size-icon-02, 24px);
-    color: var(--_code-action-color, var(--rh-color-text-primary-on-light, #151515));
-  }
-
-  .dark & {
-    --_code-action-color: var(--rh-color-text-primary-on-dark, #ffffff);
-    --_code-action-hover-focus-active-background: var(--rh-color-surface-dark, #383838);
-  }
+.shadow-fab svg {
+  width: var(--rh-size-icon-02, 24px);
+  height: var(--rh-size-icon-02, 24px);
+  color: var(--_code-action-color, var(--rh-color-text-primary-on-light, #151515));
+}
+
+.dark .shadow-fab {
+  --_code-action-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --_code-action-hover-focus-active-background: var(--rh-color-surface-dark, #383838);
 }
 
 #container,
@@ -163,10 +163,10 @@
   place-self: start center;
   height: 100%;
   position: relative;
+}
 
-  & rh-tooltip {
-    display: block;
-  }
+#actions rh-tooltip {
+  display: block;
 }
 
 #expand {
@@ -185,14 +185,14 @@
   font-size: var(--rh-font-size-body-text-sm, 0.875rem);
   font-weight: var(--rh-font-weight-body-text-regular, 400);
   line-height: var(--rh-line-height-body-text, 1.5);
+}
 
-  & svg {
-    width: 11px;
-    height: 7px;
-    rotate: var(--_expand-toggle-rotate, 180deg);
-    transform: rotate 0.2s ease-in-out;
-    color: var(--_expand-toggle-icon-color, var(--rh-color-icon-secondary-on-light, #151515));
-  }
+#expand svg {
+  width: 11px;
+  height: 7px;
+  rotate: var(--_expand-toggle-rotate, 180deg);
+  transform: rotate 0.2s ease-in-out;
+  color: var(--_expand-toggle-icon-color, var(--rh-color-icon-secondary-on-light, #151515));
 }
 
 #container.compact {