diff --git a/.stylelintrc.js b/.stylelintrc.js
index cfea225e3035..c73ee6eecfe9 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -28,7 +28,6 @@ module.exports = {
         ],
       },
     ],
-    "color-function-notation": "legacy",
     "alpha-value-notation": "number",
     "number-max-precision": 5,
     "function-no-unknown": null,
diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss
index f1248e5b21de..9d750a5791d6 100644
--- a/src/main/scss/abstracts/_theme.scss
+++ b/src/main/scss/abstracts/_theme.scss
@@ -47,12 +47,12 @@ $semantics: (
 
   // Color palette
   --very-light-grey: #f8f8f8;
-  --light-grey: hsl(240, 20%, 96.5%);
+  --light-grey: hsl(240 20% 96.5%);
   --medium-grey: #9ba7af;
   --dark-grey: #4d545d;
 
   // branding
-  --secondary: rgb(96, 125, 159);
+  --secondary: rgb(96 125 159);
   --focus-input-border: var(--accent-color);
   --focus-input-glow: color-mix(in sRGB, var(--accent-color) 15%, transparent);
 
@@ -82,14 +82,14 @@ $semantics: (
   --search-input-color: var(--brand-link-color);
   --search-bg: var(--white);
   --search-box-completion-bg: var(--primary-hover);
-  --search-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3);
+  --search-box-shadow: 0 1px 7px 0 rgb(0 0 0 / 0.3);
   --header-bg-classic: #000;
   --header-link-bg-classic-hover: #404040;
   --header-link-bg-classic-active: #404040;
   --header-item-border-radius: 4px;
 
   // Breadcrumbs bar
-  --breadcrumbs-bar-background: hsla(240, 20%, 96.5%, 0.8);
+  --breadcrumbs-bar-background: hsl(240 20% 96.5% / 0.8);
 
   // Alert call outs
   --alert-success-text-color: var(--success-color);
@@ -202,35 +202,34 @@ $semantics: (
   // Command Palette
   --command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5)
     saturate(1.4) blur(20px);
-  --command-palette-inset-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1);
+  --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1);
 
   ::backdrop {
     --command-palette-backdrop-background: radial-gradient(
       farthest-corner at 50% 30vh,
-      rgba(0, 0, 0, 0.3),
-      rgba(0, 0, 0, 0.1)
+      rgb(0 0 0 / 0.3),
+      rgb(0 0 0 / 0.1)
     );
   }
 
   // Tooltips
   --tooltip-backdrop-filter: saturate(2) blur(20px);
   --tooltip-color: var(--text-color);
-  --tooltip-box-shadow: 0 0 8px 2px rgba(0, 0, 30, 0.05),
-    0 0 1px 1px rgba(0, 0, 20, 0.025), 0 10px 20px rgba(0, 0, 20, 0.15);
+  --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 30 / 0.05),
+    0 0 1px 1px rgb(0 0 20 / 0.025), 0 10px 20px rgb(0 0 20 / 0.15);
 
   // Dropdowns
   --dropdown-backdrop-filter: saturate(1.5) blur(20px);
-  --dropdown-box-shadow: 0 10px 30px rgba(0, 0, 20, 0.2),
-    0 2px 10px rgba(0, 0, 20, 0.05), inset 0 -1px 2px rgba(255, 255, 255, 0.025);
+  --dropdown-box-shadow: 0 10px 30px rgb(0 0 20 / 0.2),
+    0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
 
   // Dialogs
   ::backdrop {
-    --dialog-backdrop-background: hsla(240, 10%, 20%, 0.8);
+    --dialog-backdrop-background: hsl(240 10% 20% / 0.8);
   }
 
-  --dialog-box-shadow: 0 10px 40px rgba(0, 0, 20, 0.15),
-    0 2px 15px rgba(0, 0, 20, 0.05),
-    inset 0 0 2px 2px rgba(255, 255, 255, 0.025);
+  --dialog-box-shadow: 0 10px 40px rgb(0 0 20 / 0.15),
+    0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025);
 
   // Dark link
   --link-dark-color: var(--text-color);
@@ -257,18 +256,18 @@ $semantics: (
   --card-background: var(--background);
   --card-background--hover: transparent;
   --card-background--active: transparent;
-  --card-border-color: hsla(240, 25%, 75%, 0.25);
-  --card-border-color--hover: hsla(240, 25%, 75%, 0.5);
-  --card-border-color--active: hsla(240, 25%, 75%, 0.75);
+  --card-border-color: hsl(240 25% 75% / 0.25);
+  --card-border-color--hover: hsl(240 25% 75% / 0.5);
+  --card-border-color--active: hsl(240 25% 75% / 0.75);
   --card-border-width: 2px;
 
   // Tab bar
   --tabs-background: var(--panel-header-bg-color);
   --tabs-item-background: transparent;
   --tabs-item-foreground: var(--text-color);
-  --tabs-item-background--hover: rgba(0, 0, 0, 0.05);
+  --tabs-item-background--hover: rgb(0 0 0 / 0.05);
   --tabs-item-foreground--hover: var(--text-color);
-  --tabs-item-background--active: rgba(0, 0, 0, 0.1);
+  --tabs-item-background--active: rgb(0 0 0 / 0.1);
   --tabs-item-foreground--active: var(--text-color);
   --tabs-item-background--selected: white;
   --tabs-item-foreground--selected: var(--link-color);
@@ -322,9 +321,9 @@ $semantics: (
   --form-input-border-radius: 0.625rem;
   --form-input-glow: 0 0 0 10px transparent;
   --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
-  --pre-background: rgba(0, 0, 0, 0.05);
+  --pre-background: rgb(0 0 0 / 0.05);
   --pre-color: var(--text-color);
-  --selection-color: rgba(2, 76, 182, 0.3);
+  --selection-color: rgb(2 76 182 / 0.3);
 
   // Animations
   --standard-transition: 0.3s ease;
@@ -334,13 +333,13 @@ $semantics: (
   --menu-text-color: black;
   --menu-bg-color: var(--white);
   --menu-selected-color: #b3d4ff;
-  --menu-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  --menu-box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
 
   // Deprecated - Add form widget / configure job
   --light-bg-color: #eee;
-  --light-bg-color--hover: rgba(255, 255, 255, 0.65);
+  --light-bg-color--hover: rgb(255 255 255 / 0.65);
   --add-item-btn-decorator-border-color: #acb;
-  --add-item-btn-decorator-bg-color: rgba(245, 249, 239, 0.75);
+  --add-item-btn-decorator-bg-color: rgb(245 249 239 / 0.75);
 
   // Plugin manager
   --plugin-manager-bg-color-already-upgraded: var(--light-grey);
@@ -349,15 +348,15 @@ $semantics: (
   --auto-complete-bg-color--prehighlight: #b3d4ff;
 
   // Default button
-  --button-background: hsla(240, 25%, 75%, 0.1);
-  --button-background--hover: hsla(240, 25%, 75%, 0.175);
-  --button-background--active: hsla(240, 25%, 75%, 0.25);
-  --button-box-shadow--focus: hsla(240, 25%, 75%, 0.1);
+  --button-background: hsl(240 25% 75% / 0.1);
+  --button-background--hover: hsl(240 25% 75% / 0.175);
+  --button-background--active: hsl(240 25% 75% / 0.25);
+  --button-box-shadow--focus: hsl(240 25% 75% / 0.1);
 
   // Variables for sidebar items, card items
-  --item-background--hover: hsla(240, 25%, 75%, 0.15);
-  --item-background--active: hsla(240, 25%, 75%, 0.225);
-  --item-box-shadow--focus: hsla(240, 25%, 75%, 0.105);
+  --item-background--hover: hsl(240 25% 75% / 0.15);
+  --item-background--active: hsl(240 25% 75% / 0.225);
+  --item-box-shadow--focus: hsl(240 25% 75% / 0.105);
 
   // Deprecated
   --primary: var(--accent-color); // Use var(--accent-color) instead
diff --git a/src/main/scss/base/_style.scss b/src/main/scss/base/_style.scss
index 98807c6e5401..7150ce0c9818 100644
--- a/src/main/scss/base/_style.scss
+++ b/src/main/scss/base/_style.scss
@@ -209,7 +209,7 @@ pre.console {
   width: 100%;
   border-radius: 3px;
   border: 1px solid var(--input-border);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.075);
   padding: 6px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
diff --git a/src/main/scss/components/_badges.scss b/src/main/scss/components/_badges.scss
index 45fc8b9dc803..4e4f10e5da76 100644
--- a/src/main/scss/components/_badges.scss
+++ b/src/main/scss/components/_badges.scss
@@ -18,7 +18,7 @@
     background: color-mix(in sRGB, var(--color) 85%, transparent);
     color: var(--white) !important;
     box-shadow: inset 0 -1px 2px var(--color, var(--text-color-secondary));
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px 1px rgb(0 0 0 / 0.1);
     backdrop-filter: blur(2.5px);
   }
 }
diff --git a/src/main/scss/form/_toggle-switch.scss b/src/main/scss/form/_toggle-switch.scss
index 451bceb71cfb..5f7f46a7f53a 100644
--- a/src/main/scss/form/_toggle-switch.scss
+++ b/src/main/scss/form/_toggle-switch.scss
@@ -113,7 +113,7 @@
     transition: var(--standard-transition);
     margin-right: 1rem;
     box-shadow:
-      inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+      inset 0 0 0 1px rgb(0 0 0 / 0.05),
       0 0 0 10px transparent;
   }
 
@@ -132,7 +132,7 @@
     mask-position: center;
     border-radius: 100px;
     transition: var(--standard-transition);
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 0 rgb(0 0 0 / 0.1);
   }
 
   &:hover::before {
@@ -143,7 +143,7 @@
   &:focus {
     &::before {
       box-shadow:
-        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+        inset 0 0 0 1px rgb(0 0 0 / 0.05),
         0 0 0 5px var(--focus-input-glow);
     }
 
diff --git a/src/main/scss/pages/_about.scss b/src/main/scss/pages/_about.scss
index b39fc84e4cd9..4417d5750ed1 100644
--- a/src/main/scss/pages/_about.scss
+++ b/src/main/scss/pages/_about.scss
@@ -18,7 +18,7 @@
     z-index: 1;
     background: repeating-conic-gradient(
       var(--background) 0deg,
-      rgba(100, 100, 100, 0.25) 20deg
+      rgb(100 100 100 / 0.25) 20deg
     );
     animation: app-about-starburst 100s linear infinite;
     opacity: 0.25;
@@ -48,15 +48,15 @@
     background-color: var(--color);
     background-image: radial-gradient(
         at 40% 20%,
-        hsla(28, 100%, 74%, 1) 0,
+        hsl(28 100% 74% / 1) 0,
         transparent 50%
       ),
-      radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 50%, hsl(359, 70%, 46%) 0, transparent 50%),
-      radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0, transparent 50%);
+      radial-gradient(at 80% 0%, hsl(189 100% 56% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 50%, hsl(355 85% 93% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 50%, hsl(359 70% 46%) 0, transparent 50%),
+      radial-gradient(at 0% 100%, hsl(22 100% 77% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 100%, hsl(242 100% 70% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 0%, hsl(343 100% 76% / 1) 0, transparent 50%);
     opacity: 0.4;
     animation: app-about-aurora-one 7s linear infinite;
   }
@@ -64,15 +64,15 @@
   &::after {
     background-image: radial-gradient(
         at 40% 20%,
-        hsla(212, 100%, 74%, 1) 0,
+        hsl(212 100% 74% / 1) 0,
         transparent 50%
       ),
-      radial-gradient(at 80% 0%, hsla(13, 100%, 56%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 50%, hsla(179, 85%, 93%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 50%, hsla(164, 100%, 76%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 100%, hsla(206, 100%, 77%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 100%, hsla(66, 100%, 70%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 0%, hsla(167, 100%, 76%, 1) 0, transparent 50%);
+      radial-gradient(at 80% 0%, hsl(13 100% 56% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 50%, hsl(179 85% 93% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 50%, hsl(164 100% 76% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 100%, hsl(206 100% 77% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 100%, hsl(66 100% 70% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 0%, hsl(167 100% 76% / 1) 0, transparent 50%);
     opacity: 0.2;
     animation: app-about-aurora-two 14s linear infinite;
   }
diff --git a/src/main/scss/pluginSetupWizard.scss b/src/main/scss/pluginSetupWizard.scss
index 9b9f5b72ed8d..0643003925fe 100644
--- a/src/main/scss/pluginSetupWizard.scss
+++ b/src/main/scss/pluginSetupWizard.scss
@@ -21,7 +21,7 @@
   position: fixed;
   inset: 0;
   z-index: 1000;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgb(0 0 0 / 0.2);
   text-align: initial;
   font-size: 13px;
 
@@ -94,8 +94,8 @@
     background: linear-gradient(
       175deg,
       #f8f8f8 0%,
-      rgba(255, 255, 255, 1) 22%,
-      rgba(255, 255, 255, 0) 100%
+      rgb(255 255 255 / 1) 22%,
+      rgb(255 255 255 / 0) 100%
     );
     overflow-y: auto;
     height: 100%;
@@ -108,7 +108,7 @@
       display: block;
       bottom: 0;
       right: 50px;
-      color: rgba(0, 0, 0, 0.05);
+      color: rgb(0 0 0 / 0.05);
     }
 
     .installing-panel {
@@ -118,7 +118,7 @@
       height: 33.3%;
       position: relative;
       z-index: 9;
-      box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
+      box-shadow: rgb(0 0 0 / 0.5) 0 1px 5px;
 
       @media screen and (width <= 992px) {
         padding: 5%;
@@ -187,7 +187,7 @@
     .plugins {
       padding-top: 2.75em;
       position: relative;
-      border-left: 1px solid rgba(0, 0, 0, 0.2);
+      border-left: 1px solid rgb(0 0 0 / 0.2);
 
       @media screen and (width >= 768px) {
         height: 100%;
@@ -266,8 +266,8 @@
         padding: 0 10px;
         height: 2.75em;
         z-index: 100;
-        background: rgba(0, 0, 0, 0.03);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+        background: rgb(0 0 0 / 0.03);
+        border-bottom: 1px solid rgb(0 0 0 / 0.2);
 
         .form-control {
           font-size: 13px;
@@ -282,7 +282,7 @@
         margin: -10px -10px 0;
         padding: 10px 20px;
         opacity: 0.7;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgb(0 0 0 / 0.2);
       }
 
       .plugin-list {
@@ -383,10 +383,10 @@
             margin: 4px -7px;
 
             &:hover {
-              background: rgba(100, 200, 255, 0.1);
+              background: rgb(100 200 255 / 0.1);
               box-shadow:
-                inset 0 400px 400px -100px rgba(100, 200, 255, 0.33),
-                inset 0 0 0 1px rgba(100, 200, 255, 0.33);
+                inset 0 400px 400px -100px rgb(100 200 255 / 0.33),
+                inset 0 0 0 1px rgb(100 200 255 / 0.33);
             }
 
             .title {
@@ -469,7 +469,7 @@
               padding-left: 9px;
               background: $badge-background;
               color: $badge-color;
-              box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25);
+              box-shadow: 0 0 1px 0 rgb(0 0 0 / 0.25);
 
               &::after {
                 content: "";
@@ -511,7 +511,7 @@
               color: #555;
               font-size: 14px;
               border-bottom: 1px solid #fff;
-              border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+              border-bottom: 1px solid rgb(255 255 255 / 0.5);
               padding-bottom: 5px;
             }
 
@@ -520,7 +520,7 @@
               margin: 5px 3px 0 0;
               background: $badge-background;
               color: $badge-color;
-              box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25);
+              box-shadow: 0 0 1px 0 rgb(0 0 0 / 0.25);
 
               &::after {
                 content: "";
@@ -595,8 +595,8 @@
 
           &:hover,
           &:focus {
-            background: rgba(100, 200, 255, 0.1);
-            box-shadow: inset -200px 0 200px -200px rgba(100, 200, 255, 0.33);
+            background: rgb(100 200 255 / 0.1);
+            box-shadow: inset -200px 0 200px -200px rgb(100 200 255 / 0.33);
             color: #337ab7;
 
             &::after {
@@ -651,7 +651,7 @@
       padding: 1px 10px;
 
       &:nth-child(odd) {
-        background: rgba(0, 0, 0, 0.05);
+        background: rgb(0 0 0 / 0.05);
       }
     }
 
@@ -687,9 +687,9 @@
     padding: 0;
     width: 75%;
     font-size: 0;
-    background: rgba(0, 0, 0, 0.1);
+    background: rgb(0 0 0 / 0.1);
     border-bottom: 1px solid #ccc;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: 1px solid rgb(0 0 0 / 0.1);
 
     @media screen and (width <= 992px) {
       width: 100%;
@@ -713,15 +713,15 @@
       overflow: hidden;
       font-size: 13px;
       height: 45px;
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-      background: rgba(255, 255, 255, 0.75);
+      border-right: 1px solid rgb(0 0 0 / 0.1);
+      border-bottom: 1px solid rgb(0 0 0 / 0.1);
+      box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+      background: rgb(255 255 255 / 0.75);
 
       &:nth-child(odd) {
         box-shadow:
-          0 1px 3px rgba(0, 0, 0, 0.2),
-          inset 0 0 0 999px rgba(0, 0, 0, 0.05);
+          0 1px 3px rgb(0 0 0 / 0.2),
+          inset 0 0 0 999px rgb(0 0 0 / 0.05);
       }
 
       &::before {
@@ -734,12 +734,12 @@
         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='192' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
         mask-size: contain;
         mask-position: center;
-        background: rgba(0, 0, 0, 0.1);
+        background: rgb(0 0 0 / 0.1);
       }
 
       &.installing {
         &::before {
-          background: rgba(0, 60, 100, 0.33);
+          background: rgb(0 60 100 / 0.33);
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M400 148l-21.12-24.57A191.43 191.43 0 00240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 00181.07-128' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M464 97.42V208a16 16 0 01-16 16H337.42c-14.26 0-21.4-17.23-11.32-27.31L436.69 86.1C446.77 76 464 83.16 464 97.42z'/%3E%3C/svg%3E");
           mask-size: contain;
           mask-position: center;
@@ -810,12 +810,12 @@
       margin-top: 1em;
       padding: 20px 25px;
       box-shadow:
-        inset 0 -200px 200px -100px rgba(0, 0, 0, 0.1),
-        0 1px 3px rgba(0, 0, 0, 0.2);
-      border: 1px solid rgba(0, 60, 100, 0.5);
+        inset 0 -200px 200px -100px rgb(0 0 0 / 0.1),
+        0 1px 3px rgb(0 0 0 / 0.2);
+      border: 1px solid rgb(0 60 100 / 0.5);
       text-shadow: #fff 0 1px 3px;
       position: relative;
-      background: rgba(255, 255, 255, 0.75);
+      background: rgb(255 255 255 / 0.75);
 
       @media screen and (width >= 768px) {
         max-width: 41%;
@@ -824,37 +824,37 @@
       }
 
       &:hover {
-        box-shadow: inset 0 1px 3px -1px rgba(0, 0, 0, 0.2);
-        background: rgba(100, 200, 255, 0.1);
+        box-shadow: inset 0 1px 3px -1px rgb(0 0 0 / 0.2);
+        background: rgb(100 200 255 / 0.1);
       }
 
       &:focus {
         background: #fff;
         box-shadow:
-          inset 0 -200px 200px -100px rgba(0, 0, 0, 0.1),
-          0 0 5px 3px rgba(00, 180, 250, 0.2);
+          inset 0 -200px 200px -100px rgb(0 0 0 / 0.1),
+          0 0 5px 3px rgb(00 180 250 / 0.2);
       }
 
       &:hover:focus {
-        background: rgba(100, 200, 255, 0.1);
+        background: rgb(100 200 255 / 0.1);
       }
 
       &.btn-primary {
-        background: rgba(200, 240, 255, 0.2);
+        background: rgb(200 240 255 / 0.2);
         box-shadow:
-          inset 0 -200px 200px -100px rgba(0, 120, 160, 0.2),
-          0 1px 3px rgba(0, 0, 0, 0.2);
-        color: rgba(0, 80, 120, 1);
+          inset 0 -200px 200px -100px rgb(0 120 160 / 0.2),
+          0 1px 3px rgb(0 0 0 / 0.2);
+        color: rgb(0 80 120 / 1);
 
         &:hover {
-          box-shadow: inset 0 1px 3px -1px rgba(0, 0, 0, 0.2);
-          background: rgba(70, 200, 255, 0.2);
+          box-shadow: inset 0 1px 3px -1px rgb(0 0 0 / 0.2);
+          background: rgb(70 200 255 / 0.2);
         }
 
         &:focus {
           box-shadow:
-            inset 0 -200px 200px -100px rgba(0, 120, 160, 0.2),
-            0 0 5px 3px rgba(00, 180, 250, 0.2);
+            inset 0 -200px 200px -100px rgb(0 120 160 / 0.2),
+            0 0 5px 3px rgb(00 180 250 / 0.2);
         }
       }