style: add notification component's styles

src/components/notification/fds-notification.scss

@@ -0,0 +1,82 @@
+@import '../../styles/settings/prefix';
+@import '../../styles/tools/notification';
+@import '../../styles/tools/typography';
+
+:host {
+  display: block;
+}
+
+.#{$prefix}-notification {
+  @include notification-base;
+}
+
+.#{$prefix}-notification__content-wrapper {
+  display: flex;
+  flex-flow: column wrap;
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  gap: $spacing-3x-small;
+}
+
+.#{$prefix}-notification__header {
+  @include type-style('heading-06');
+}
+
+.#{$prefix}-notification__content {
+  @include type-style('body-short-01');
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([status="information"]) {
+  @include notification-status(
+    $notification-color-information-background,
+    $notification-color-information-text,
+    $notification-color-information-border,
+  );
+}
+
+:host([status="success"]) {
+  @include notification-status(
+    $notification-color-success-background,
+    $notification-color-success-text,
+    $notification-color-success-border,
+  );
+}
+
+:host([status="warning"]) {
+  @include notification-status(
+    $notification-color-warning-background,
+    $notification-color-warning-text,
+    $notification-color-warning-border,
+  );
+}
+
+:host([status="error"]) {
+  @include notification-status(
+    $notification-color-error-background,
+    $notification-color-error-text,
+    $notification-color-error-border,
+  );
+}
+
+:host([type="toast"]) {
+  min-width: calc($spacing-medium * 18);
+  max-width: calc($spacing-medium * 18);
+}
+
+:host([type="app"]) .#{$prefix}-notification {
+  align-items: center;
+}
+
+:host([type="app"]) .#{$prefix}-notification__content-wrapper {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+
+

src/styles/tools/_notification.scss

@@ -1,35 +1,20 @@
+@import '../../design-tokens/build/scss/tokens';
+
 @mixin notification-base {
   position: relative;
   display: flex;
-  width: 100%;
-  height: auto;
   align-items: flex-start;
+  justify-content: space-between;
   padding: $notification-size-padding;
   gap: $notification-size-gap;
 }
 
-@mixin notification-variant(
+@mixin notification-status(
   $background-color,
   $text-color,
   $border-color,
-  $hover-background-color,
-  $active-background-color
 ) {
-  border-left: 2px solid $border-color;
   background-color: $background-color;
   color: $text-color;
-
-  .#{$prefix}-icon {
-    color: $text-color;
-  }
-
-  .#{$prefix}-notification__btn-close {
-    &:hover {
-      background-color: $hover-background-color;
-    }
-
-    &:active {
-      background-color: $active-background-color;
-    }
-  }
+  border-left: 2px solid $border-color;
 }