Make the copy button visible on hover

Author: praveen-murali-ind

src/styles/editor/editor-content.scss

@@ -170,9 +170,7 @@
     font-weight: var(--neeto-editor-content-heading-font-weight);
 
     strong {
-      font-weight: var(
-        --neeto-editor-content-heading-font-weight-bold
-      ) !important;
+      font-weight: var(--neeto-editor-content-heading-font-weight-bold) !important;
     }
   }
 
@@ -237,6 +235,7 @@
     }
 
     &:hover {
+
       h1,
       h2,
       h3,
@@ -336,6 +335,8 @@
       align-items: center;
       top: 0.25rem;
       right: 0.25rem;
+      visibility: hidden;
+      opacity: 0;
 
       &__menu {
         display: flex;
@@ -348,6 +349,26 @@
       }
     }
 
+    &:hover {
+      .neeto-editor-codeblock-options {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .copy-button {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .copy-button {
+      position: absolute;
+      top: 0.25rem;
+      right: 0.25rem;
+      visibility: hidden;
+      opacity: 0;
+    }
+
     counter-reset: line-number;
 
     .highlight-line {
@@ -375,15 +396,9 @@
         content: "";
       }
     }
-
-    .copy-button {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-    }
   }
 
-  pre > code {
+  pre>code {
     font-size: var(--neeto-editor-content-code-font-size);
     background-color: transparent;
     border-width: 0;
@@ -395,18 +410,16 @@
     display: block;
     width: 100%;
     overflow-x: auto;
-    padding: 2rem 0.75rem 0.75rem 0px;
+    padding: 0.75rem 0.75rem 0.75rem 0px;
   }
 
   // Blockquote
   blockquote {
     font-weight: var(--neeto-editor-font-medium);
     color: rgba(var(--neeto-editor-content-blockquote-color));
     border-left-width: var(--neeto-editor-content-blockquote-border-left-width);
-    border-left-color: rgba(
-      var(--neeto-editor-content-blockquote-border-color)
-    );
-    quotes: "\201C""\201D""\2018""\2019";
+    border-left-color: rgba(var(--neeto-editor-content-blockquote-border-color));
+    quotes: "\201C" "\201D" "\2018" "\2019";
     margin-bottom: var(--neeto-editor-content-blockquote-margin-bottom);
     padding-left: var(--neeto-editor-content-blockquote-padding-left);
 
@@ -415,11 +428,11 @@
       color: inherit;
     }
 
-    & > p::before {
+    &>p::before {
       content: "" !important;
     }
 
-    & > p::after {
+    &>p::after {
       content: "" !important;
     }
   }
@@ -722,4 +735,4 @@
       background-color: rgb(var(--neeto-editor-gray-300));
     }
   }
-}
+}