chore: fix sidebar.scss linut

Author: meroxdotdev

_sass/layout/_sidebar.scss

@@ -33,9 +33,10 @@ $sidebar-display: 'sidebar-display';
 
   @include bp.lt(bp.get(lg)) {
     @include mx.slide;
+
     transform: translateX(-#{v.$sidebar-width});
     -webkit-transform: translateX(-#{v.$sidebar-width});
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
 
     /* Toggle sidebar visibility on mobile when sidebar-display attribute is present */
     [#{$sidebar-display}] & {
@@ -84,6 +85,7 @@ $sidebar-display: 'sidebar-display';
   .profile-wrapper {
     @include mx.mt-mb(2.5rem);
     @extend %clickable-transition;
+
     padding-left: 2.5rem;
     padding-right: 1.25rem;
     width: 100%;
@@ -102,6 +104,7 @@ $sidebar-display: 'sidebar-display';
   .site-title {
     @extend %clickable-transition;
     @extend %sidebar-link-hover;
+
     font-family: inherit;
     font-weight: 900;
     font-size: 1.75rem;
@@ -152,6 +155,7 @@ $sidebar-display: 'sidebar-display';
 
       a.nav-link {
         @include mx.pt-pb(0.6rem);
+
         display: flex;
         align-items: center;
         border-radius: 12px;
@@ -171,15 +175,15 @@ $sidebar-display: 'sidebar-display';
           background: linear-gradient(
             90deg,
             transparent 0%,
-            rgba(255, 255, 255, 0.05) 50%,
+            rgb(255 255 255 / 5%) 50%,
             transparent 100%
           );
           transition: left 0.5s ease;
         }
 
         &:hover {
           background-color: var(--sidebar-hover-bg);
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
 
           &::before {
             left: 100%;
@@ -206,7 +210,7 @@ $sidebar-display: 'sidebar-display';
           color: var(--sidebar-active-color);
           background-color: var(--sidebar-hover-bg);
           box-shadow: 
-            0 4px 12px rgba(0, 0, 0, 0.1),
+            0 4px 12px rgb(0 0 0 / 10%),
             inset 3px 0 0 var(--sidebar-active-color);
 
           i {
@@ -257,7 +261,7 @@ $sidebar-display: 'sidebar-display';
       &:not(:focus-visible) {
         box-shadow: 
           var(--sidebar-border-color) 0 0 0 1px,
-          0 2px 8px rgba(0, 0, 0, 0.1);
+          0 2px 8px rgb(0 0 0 / 10%);
       }
 
       // Ripple effect
@@ -269,7 +273,7 @@ $sidebar-display: 'sidebar-display';
         width: 0;
         height: 0;
         border-radius: 50%;
-        background: rgba(255, 255, 255, 0.2);
+        background: rgb(255 255 255 / 20%);
         transition: all 0.3s ease;
         transform: translate(-50%, -50%);
       }
@@ -278,8 +282,8 @@ $sidebar-display: 'sidebar-display';
         background-color: var(--sidebar-hover-bg);
         transform: translateY(-2px) scale(1.05);
         box-shadow: 
-          0 8px 25px rgba(0, 0, 0, 0.15),
-          0 4px 10px rgba(0, 0, 0, 0.1);
+          0 8px 25px rgb(0 0 0 / 15%),
+          0 4px 10px rgb(0 0 0 / 10%);
 
         &::before {
           width: 100%;
@@ -328,6 +332,7 @@ $sidebar-display: 'sidebar-display';
     .icon-border {
       @extend %no-cursor;
       @include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
+
       background-color: var(--sidebar-btn-color);
       content: '';
       width: $btn-border-width;