feat(ui)!: scope all payload css to payload-default layer (#8545)

All payload css is now encapsulated inside CSS layers under `@layer
payload-default`

Any custom css will now have the highest possible specificity.
We have also provided a new layer `@layer payload` if you want to use
layers and ensure that your styles are applied after payload.

To override existing styles in a way that the existing rules of
specificity would be respected you can use the default layer like so
```css
@layer payload-default {
  // my styles within the payload specificity
}
```

packages/next/src/views/ResetPassword/index.scss

@@ -1,31 +1,33 @@
 @import '../../scss/styles.scss';
 
-.reset-password {
-  &__wrap {
-    z-index: 1;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: base(0.8);
-    max-width: base(36);
+@layer payload-default {
+  .reset-password {
+    &__wrap {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: base(0.8);
+      max-width: base(36);
 
-    & > form {
-      width: 100%;
+      & > form {
+        width: 100%;
 
-      & > .inputWrap {
-        display: flex;
-        flex-direction: column;
-        gap: base(0.8);
+        & > .inputWrap {
+          display: flex;
+          flex-direction: column;
+          gap: base(0.8);
 
-        > * {
-          margin: 0;
+          > * {
+            margin: 0;
+          }
         }
       }
-    }
 
-    & > .btn {
-      margin: 0;
+      & > .btn {
+        margin: 0;
+      }
     }
   }
 }