Adjust warning/alert/... styling

css/area_msg.less

@@ -15,23 +15,70 @@
     }
 }
 
-/* short fix: SPR-891 - icons for notifications in message area are repeated */
 div.success,
 div.error,
 div.info,
 div.notify {
-    background-repeat: no-repeat;
+    @media @screen_max-md {
-    background-position: 8px 50%;
+        flex-direction: column;
-    border: 1px solid #eeb;
+    }
-    font-size: 90%;
-    margin: 0 0 .5em;
-    padding: .4em;
-    padding-left: 32px;
-    overflow: hidden;
-    border-radius: @fix_border-radius;
 
-    * {
+    display: flex;
-        color: inherit;
+    align-items: start;
+    gap: 0.5rem;
+    border: none;
+    border-left: solid 0.5rem var(--color-shade-4);
+    border-radius: 0.5rem;
+    padding: 1em;
+    background-image: none;
+    background-color: var(--color-shade-1);
+
+    &::before {
+        content: "";
+        flex-shrink: 0;
+        margin-top: 0.3em;
+        width: 1em;
+        height: 1em;
+        mask-size: contain;
+        mask-position: center top;
+        mask-repeat: no-repeat;
+        background-color: currentColor;
+    }
+
+    &.success {
+        color: var(--color-success);
+
+        &::before {
+            mask-image: url(img/tick_small.svg);
+        }
+    }
+
+    &.error {
+        border-left-color: var(--color-error);
+        color: var(--color-foreground);
+
+        &::before {
+            background-color: var(--color-error);
+            mask-image: url(img/power.svg);
+        }
+    }
+
+    &.info {
+        color: var(--color-foreground);
+
+        &::before {
+            mask-image: url(img/info.svg);
+        }
+    }
+
+    &.notify {
+        border-left-color: var(--color-warning);
+        color: var(--color-foreground);
+
+        &::before {
+            background-color: var(--color-warning);
+            mask-image: url(img/warning.svg);
+        }
     }
 
     a {

css/plugins/extension__manager.less

@@ -14,6 +14,30 @@
                 padding-left: .3rem;
                 padding-right: .3rem;
             }
+
+            p.permerror {
+                @media @screen_max-md {
+                    flex-direction: column;
+                }
+
+                display: flex;
+                align-items: start;
+                gap: 0.5rem;
+                background: none;
+
+                &::before {
+                    content: "";
+                    flex-shrink: 0;
+                    margin-top: 0.3em;
+                    width: 1em;
+                    height: 1em;
+                    mask-size: contain;
+                    mask-position: center top;
+                    mask-repeat: no-repeat;
+                    mask-image: url(img/warning.svg);
+                    background-color: var(--color-warning);
+                }
+            }
         }
 
         ul.tabs {

css/plugins/wrap.less

@@ -39,11 +39,6 @@
       background-image: none;
       background-color: var(--color-shade-1);
 
-      p {
-        margin: 0;
-        max-width: calc(~"100% - 2.5rem");
-      }
-
       &::before {
         content: "";
         flex-shrink: 0;
@@ -53,6 +48,7 @@
         mask-size: contain;
         mask-position: center top;
         mask-repeat: no-repeat;
+        background-color: currentColor;
       }
     }
 
@@ -60,7 +56,6 @@
       color: var(--color-foreground);
 
       &::before {
-        background-color: currentColor;
         mask-image: url(img/info.svg);
       }
     }
@@ -69,7 +64,6 @@
       color: var(--color-foreground);
 
       &::before {
-        background-color: currentColor;
         mask-image: url(img/lightbulb.svg);
       }
     }
@@ -118,7 +112,6 @@
       color: var(--color-foreground);
 
       &::before {
-        background-color: currentColor;
         mask-image: url(img/tick_small.svg);
       }
     }