From fa62270237ede2e98b1d5720884032351846568a Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 12 Jan 2024 14:25:26 +0100
Subject: [PATCH] fix: chromatic

---
 src/components/notification/notification.scss | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 4bfd1af56d..beda049dfe 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -26,6 +26,7 @@
   --sbb-notification-timing-function: ease-in;
   --sbb-notification-transition: max-height var(--sbb-notification-animation-duration)
       var(--sbb-animation-duration-2x) var(--sbb-notification-timing-function),
+    margin var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     padding var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x)
       var(--sbb-notification-timing-function),
     border var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x)
@@ -36,15 +37,6 @@
   // As the notification has always a light background, we have to fix the focus outline color
   // to default color for cases where the notification is used in a negative context.
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
-
-  margin: var(--sbb-notification-margin);
-  transition: margin var(--sbb-notification-animation-duration)
-    var(--sbb-notification-timing-function);
-  animation: {
-    name: animate-margin;
-    duration: var(--sbb-notification-animation-duration);
-    timing-function: var(--sbb-notification-timing-function);
-  }
 }
 
 :host(:is([data-state='opened'], [data-state='opening'])) {
@@ -55,6 +47,7 @@
   );
   --sbb-notification-transition: max-height var(--sbb-notification-animation-duration)
       var(--sbb-notification-timing-function),
+    margin var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     padding var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     border var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     visibility var(--sbb-notification-animation-duration) var(--sbb-notification-animation-duration)
@@ -93,6 +86,7 @@
 
 .sbb-notification__wrapper {
   position: relative;
+  margin: var(--sbb-notification-margin);
   inset-inline-start: calc(
     var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)
   );
@@ -214,6 +208,7 @@
     opacity: 0;
     max-height: 0;
     border-block: none;
+    margin: 0;
   }
 
   to {
@@ -221,15 +216,6 @@
     opacity: 1;
     max-height: var(--sbb-notification-max-height);
     border-block: var(--sbb-notification-border);
-  }
-}
-
-@keyframes animate-margin {
-  from {
-    margin: 0;
-  }
-
-  to {
     margin: var(--sbb-notification-margin);
   }
 }