💄 chore(style): fix some styles, update others to work on gtk4

the inset box-shadow on hover technique doesn't work anymore 😭

ags/style/_control-center.scss

@@ -10,7 +10,6 @@
   background: colors.$bg-translucent;
   border-radius: 28px;
   padding: 20px;
-  box-shadow: 0 0 6px 1px colors.$bg-translucent;
 
   & > * {
     margin: 9px 0;
@@ -35,8 +34,8 @@
       font-weight: 600;
     }
 
-    & > box:not(.button-row) icon {
-      font-size: 12px;
+    & > box:not(.button-row) image {
+      -gtk-icon-size: 12px;
       color: colors.$fg-disabled;
       margin-right: 3px;
     }
@@ -168,59 +167,23 @@
   }
 }
 
-box.history {
-  background: colors.$bg-translucent;
-  box-shadow: 0 0 6px 1px colors.$bg-translucent;
-  border-radius: 24px;
-  padding: 18px;
-  transition: 120ms linear;
-
-  &.hide {
-    opacity: 0;
-  }
-
-  & .notifications {
-    & .notification {
-      background: colors.$bg-translucent-primary;
-      padding: 3px;
-    }
-  }
-
-  & > .button-row {
-    margin-top: 12px;
-
-    & button {
-      padding: 6px;
-
-      &:focus {
-        box-shadow: inset 0 0 0 1px colors.$fg-primary;
-      }
-
-      & icon {
-        font-size: 16px;
-      }
-
-      & label {
-        font-size: 12px;
-        font-weight: 600;
-      }
-    }
-  }
-}
-
 .tiles-container {
   @include mixins.reset-props;
 
   & > flowbox {
     & > flowboxchild .tile {
-      $radius: 16px;
+      $radius: 18px;
 
       &:not(.toggled) > .toggle-button,
       &:not(.toggled) > button.more {
-        @include mixins.hover-shadow;
         background: colors.$bg-primary;
       }
 
+      &:not(.toggled) > .toggle-button:hover,
+      &:not(.toggled) > button.more:hover {
+        background: color.scale($color: colors.$bg-primary, $lightness: 10%);
+      }
+
       &.toggled .toggle-button:hover,
       &.toggled button.more:hover {
         background: colors.$bg-tertiary;
@@ -287,3 +250,34 @@ box.history {
     padding-top: 12px;
   }
 }
+
+box.notif-history {
+  background: colors.$bg-translucent;
+  border-radius: 24px;
+  padding: 18px;
+  transition: 120ms linear;
+
+  &.hide {
+    opacity: 0;
+  }
+
+  & .notifications {
+    & .notification {
+      background: colors.$bg-translucent-primary;
+      padding: 3px;
+    }
+  }
+
+  & .button-row {
+    margin-top: 12px;
+
+    & button {
+      padding: 7px;
+
+      & label {
+        font-size: 12px;
+        font-weight: 600;
+      }
+    }
+  }
+}