working bar

style.scss

@@ -1,17 +1,18 @@
 // https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
 $fg-color: #{"@theme_fg_color"};
 $bg-color: #{"@theme_bg_color"};
+$corner-size: 7;
+$notch-color: #222;
 
 window.Bar {
   background: transparent;
   color: $fg-color;
-  font-weight: bold;
+  /* font-weight: bold; */
   font-size: 25px;
 
   >centerbox {
     background: $bg-color;
     border-radius: 10px;
-    margin: 8px;
   }
 
   button {
@@ -19,25 +20,42 @@ window.Bar {
     margin: 2px;
   }
 
+  .AudioSlider {
+    min-width: 200px;
+  }
+
   .Workspaces {
+    background-color: black;
+    margin: 0 60px 10px 60px;
+    border-radius: 0 0 20px 20px;
+
     button {
       all: unset;
-      background-color: transparent;
-      margin: 2px;
-      padding: 2px;
+      color: white;
+
+      &.focused {
+        color: red;
+        border-color: blue;
+      }
+
+      label {
+        transition: 200ms;
+        padding: 0 8px;
+        margin: 2px;
+        border-radius: 10px;
+        border: 1pt solid transparent;
+      }
 
       &:hover label {
-        background-color: red;
+        background-color: blue;
         border-color: $bg-color;
       }
 
       &:active label {
-        background-color: $fg-color;
+        background-color: green;
+        border-color: red;
       }
 
-      .focused {
-        color: red;
-      }
     }
   }
 }