From a396c86e841554abfb981b0637adeb6f23bb6b71 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 10 Aug 2021 11:07:17 -0400
Subject: [PATCH] improve code block button styles

---
 docs/assets/plugins/code-block/code-block.css | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 7fd4132a..f55ae3b3 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -98,7 +98,8 @@
   border-radius: 0;
   background: rgb(var(--sl-color-neutral-1000));
   font: inherit;
-  font-size: 0.875rem;
+  font-size: 0.7rem;
+  font-weight: 500;
   text-transform: uppercase;
   color: rgb(var(--sl-color-neutral-600));
   padding: 0 1rem;
@@ -106,7 +107,13 @@
   transition: none;
 }
 
+.code-block__button:not(:last-of-type) {
+  border-right: solid 1px rgb(var(--sl-color-neutral-200));
+}
+
 .code-block__button--codepen {
+  display: flex;
+  place-items: center;
   width: 6rem;
 }
 
@@ -121,6 +128,7 @@
 .code-block__button:hover,
 .code-block__button:active {
   box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400));
+  border-right-color: transparent;
   background-color: rgb(var(--sl-color-primary-50));
   color: rgb(var(--sl-color-primary-600));
   z-index: 1;
@@ -130,6 +138,7 @@
   outline: none;
   color: rgb(var(--sl-color-primary-600));
   border-color: rgb(var(--sl-color-primary-400));
+  border-right-color: transparent;
   background-color: rgb(var(--sl-color-primary-50));
   box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)),
     0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
@@ -144,10 +153,6 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 2.5rem;
-  font: inherit;
-  font-size: 0.7rem;
-  font-weight: 500;
   color: rgb(var(--sl-color-neutral-600));
   cursor: pointer;
   transition: 250ms background-color;