feat: auto copy button code

assets/scss/common/_variables.scss

@@ -24,6 +24,10 @@ $pink-500: #d32e9d;
 
 $primary: $purple;
 
+$color-btn-bg: $pink-500;
+$color-btn-border: darken($pink-500, 5%);
+$color-btn-text: $white;
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.

assets/scss/components/_buttons.scss

@@ -50,44 +50,79 @@ body.dark .toggle-dark {
   display: none;
 }
 
-.btn-clipboard {
-  display: none;
+pre {
+  position: relative;
+}
+
+@include media-breakpoint-down(md) {
+  .btn-copy {
+    display: none;
+  }
+}
+
+.btn-copy {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+  position: absolute;
+  right: 0.25rem;
+  top: 0.25rem;
+  z-index: 10;
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-sm;
+  padding: 0.25rem 0.5rem;
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: $color-btn-border;
+}
+
+.btn-copy:hover {
+  color: $color-btn-text;
+  background-color: lighten($color-btn-bg, 5%);
+  border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:focus {
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: lighten($color-btn-border, 15%);
+  box-shadow: none;
+}
+
+.btn-copy:active,
+.btn-copy.active {
+  color: $color-btn-text;
+  background-color: $color-btn-bg;
+  border-color: lighten($color-btn-border, 15%);
+}
+
+.btn-copy:active:focus,
+.btn-copy.active:focus {
+  box-shadow: none;
 }
 
 @include media-breakpoint-up(md) {
-  .doks-clipboard {
-    position: relative;
-    float: right;
-  }
-
-  .btn-clipboard {
-    position: absolute;
-    top: 1rem;
-    right: 0.25rem;
-    z-index: 10;
-    display: block;
-    padding: 0.25rem 0.5rem;
-    font-size: $font-size-sm;
+  pre:hover .btn-copy {
+    opacity: 1;
   }
 }
 
-.copy-status::after {
+.btn-copy::after {
   content: "Copy";
   display: block;
-  color: $body-color;
+  color: $color-btn-text;
 }
 
-.copy-status:hover::after {
+.btn-copy:hover::after {
   content: "Copy";
   display: block;
-  color: $pink-500;
+  color: $color-btn-text;
 }
 
-.copy-status:focus::after,
-.copy-status:active::after {
+.btn-copy:focus::after,
+.btn-copy:active::after {
   content: "Copied";
   display: block;
-  color: $pink-500;
+  color: $color-btn-text;
 }
 
 .collapsible-sidebar {