merge fix

app/src/styles/pages/realTimeViz.scss

@@ -1,4 +1,5 @@
 @use "../abstracts/variables.scss" as *;
+@use "../abstracts/mixins" as *;
 
 // Main Container
 .realTime-viz {
@@ -148,9 +149,8 @@
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
-    border-radius: 6px;
     overflow: visible !important;
-
+    
     .panel-content {
       position: relative;
       height: 100%;
@@ -160,6 +160,7 @@
       flex-direction: column;
       gap: 10px;
       background-color: var(--background-color);
+      border-radius: #{$border-radius-small};
 
       &::-webkit-scrollbar {
         display: none;
@@ -194,8 +195,6 @@
       left: 0;
       right: 0;
 
-
-
       .panel-content {
         display: flex;
         flex-direction: row;
@@ -236,9 +235,9 @@
   }
 }
 
-.playingFlase{
-  .zoon-wrapper{
-    bottom: 300px !important;
+.playingFlase {
+  .zoon-wrapper.bottom {
+    bottom: 300px;
   }
 }
 // Side Buttons
@@ -246,9 +245,11 @@
   position: absolute;
   display: flex;
   background-color: var(--background-color);
-  padding: 5px;
-  border-radius: 8px;
+  padding: 2px;
+  border-radius: 2px;
   transition: transform 0.3s ease;
+  box-shadow: #{$box-shadow-medium};
+  // outline: 1px solid var(--border-color);
 
   .extra-Bs {
     display: flex;
@@ -278,13 +279,29 @@
     transition: background-color 0.3s ease;
     width: 18px;
     height: 18px;
-    display: flex;
-    justify-content: center;
-    // align-items: center;
+    @include flex-center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
     border-radius: 4px;
+    .add-icon {
+      @include flex-center;
+      transition: rotate 0.2s;
+    }
+    path {
+      stroke: var(--primary-color);
+      stroke-width: 2;
+    }
+  }
+  .active {
+    background: #ffe3e0;
+    .add-icon {
+      rotate: 45deg;
+      path {
+        stroke: #f65648;
+        stroke-width: 2;
+      }
+    }
   }
 
   &.top {