From af0907ba6bc48bb1091aae88e9ee8e20ef8ca822 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 20 Dec 2023 10:47:43 +0100
Subject: [PATCH] fix: margin transition

---
 src/components/notification/notification.scss | 4 +---
 src/components/notification/notification.ts   | 1 +
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 0240bc128c6..4bbc8d837f5 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -37,7 +37,7 @@
   // 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: 0;
+  margin: var(--sbb-notification-margin);
   transition: margin var(--sbb-notification-animation-duration)
     var(--sbb-notification-timing-function);
   animation: {
@@ -61,8 +61,6 @@
       var(--sbb-notification-timing-function),
     opacity var(--sbb-notification-animation-duration) var(--sbb-notification-animation-duration)
       var(--sbb-notification-timing-function);
-
-  margin: var(--sbb-notification-margin);
 }
 
 :host(:is([data-resize-disable-animation], [disable-animation])) {
diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts
index 241028a9de3..f7cb591d558 100644
--- a/src/components/notification/notification.ts
+++ b/src/components/notification/notification.ts
@@ -125,6 +125,7 @@ export class SbbNotificationElement extends LitElement {
   public close(): void {
     if (this._state === 'opened') {
       this._state = 'closing';
+      this.style.setProperty('--sbb-notification-margin', '0');
       this._willClose.emit();
       this.disableAnimation && this._handleClosing();
     }