merge fix

app/src/styles/components/tools.scss

@@ -161,25 +161,49 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  background-color: var(--accent-color);
-
+  background-color: var(--highlight-accent-color);
   cursor: pointer;
   @include flex-center;
   position: fixed;
   bottom: 60px;
   left: 50%;
   transform: translate(-50%, 0);
-  transition: background-color 0.3s, transform 0.3s;
-  color: var(--background-color);
-  // transform: none;
+  color: var(--accent-color);
   z-index: 100;
-
+  isolation: isolate;
+  font-weight: 700;
   &:hover {
+    font-weight: 500;
     background-color: var(--accent-color);
+    color: var(--highlight-accent-color);
+    &::after{
+      animation: pulse 1s ease-out infinite;
+    }
+  }
+  &::after{
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: var(--background-color-secondary);
+    border-radius: #{$border-radius-circle};
+    z-index: -1;
   }
 }
 
-
+@keyframes pulse {
+  0%{
+    opacity: 0;
+    scale: .5;
+  }
+  50%{
+    opacity: 1;
+  }
+  100%{
+    opacity: 0;
+    scale: 2;
+  }
+}
 
 @keyframes expandWidth {
   from {