feature: notifications__item styling scrollbar

src/styles/abstracts/_variables.scss

@@ -44,6 +44,8 @@
   --color-notification-summary: var(--color-grey-4);
   --solid-notifications-theme: var(--color-primary);
   --color-notification-item-border: var(--color-grey-12);
+  --color-notification-scrollbar-background: #EDF1FA;
+  --color-notification-scrollbar-track: var(--color-grey-8);
   --color-user-panel-header-text: var(--color-secondary);
   --color-user-panel-header-background: var(--color-white);
   --color-user-panel-header-text-open: var(--color-white);

src/styles/base/header.scss

@@ -106,12 +106,35 @@ solid-notifications {
     }
   
     .solid-notifications__list {
-      overflow-x: hidden;
+    
       position: fixed;
       left: 0;
       top: 4.5rem;
       width: 100vw;
 
+
+      overflow: auto;
+      height: 60px;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: none;
+
+      scrollbar-width: thin;
+      scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background);
+
+      &::-webkit-scrollbar-track {
+        background: var(--color-notification-scrollbar-background);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-notification-scrollbar-track);
+        border-radius: 6px;
+        border: 3px solid var(--color-notification-scrollbar-background);
+      }
+
+      &::-webkit-scrollbar {
+        width: 11px;
+      }
+
       @include breakpoint(md) {
         border: 0;
         border-radius: 0;