diff --git a/src/components/notification/Notification.scss b/src/components/notification/Notification.scss
index 6f931fc0fa..2943d62580 100644
--- a/src/components/notification/Notification.scss
+++ b/src/components/notification/Notification.scss
@@ -11,10 +11,12 @@
     left: 0;
     z-index: $notifications-wrapper-z-index;
     height: 0; /* allows elements around notifications to be clickable */
+    pointer-events: none; /* wrapper doesn’t block clicks elsewhere */
 }
 
 .notification-container {
     height: 0;
+    pointer-events: auto; /* notifications and their buttons receive hover/click */
 }
 
 .notification {
@@ -30,9 +32,9 @@
     background-color: $bdl-gray-10;
     border: 2px solid $bdl-gray;
     border-radius: $bdl-border-radius-size-large;
-    box-shadow: 0 2px 6px fade-out($black, .85);
+    box-shadow: 0 2px 6px fade-out($black, 0.85);
     opacity: 1;
-    transition: opacity .1s ease-out;
+    transition: opacity 0.1s ease-out;
 
     &.info {
         background-color: $bdl-green-light-20;
diff --git a/src/styles/constants/_layout.scss b/src/styles/constants/_layout.scss
index 04a7622b71..8252285161 100644
--- a/src/styles/constants/_layout.scss
+++ b/src/styles/constants/_layout.scss
@@ -4,7 +4,7 @@ $menu-z-index: 170 !default;
 $submenu-z-index: 171 !default;
 $overlay-z-index: 190 !default;
 $tooltip-z-index: 190 !default;
-$notifications-wrapper-z-index: 200 !default;
+$notifications-wrapper-z-index: 400 !default; // above blueprint modal (370) for compatibility
 
 // Borders
 $bdl-border-radius-size: 4px;
diff --git a/src/styles/variables.js b/src/styles/variables.js
index a6cac985c3..3f1bf94718 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -88,7 +88,7 @@ export const menuZIndex = "170"; // menu-z-index
 export const submenuZIndex = "171"; // submenu-z-index
 export const overlayZIndex = "190"; // overlay-z-index
 export const tooltipZIndex = "190"; // tooltip-z-index
-export const notificationsWrapperZIndex = "200"; // notifications-wrapper-z-index
+export const notificationsWrapperZIndex = "400"; // notifications-wrapper-z-index
 export const bdlBorderRadiusSize = "4px"; // bdl-border-radius-size
 export const bdlBorderRadiusSizeMed = "6px"; // bdl-border-radius-size-med
 export const bdlBorderRadiusSizeLarge = "8px"; // bdl-border-radius-size-large
diff --git a/src/styles/variables.json b/src/styles/variables.json
index a725da3756..23db1273d7 100644
--- a/src/styles/variables.json
+++ b/src/styles/variables.json
@@ -85,7 +85,7 @@
     "submenu-z-index": "171",
     "overlay-z-index": "190",
     "tooltip-z-index": "190",
-    "notifications-wrapper-z-index": "200",
+    "notifications-wrapper-z-index": "400",
     "bdl-border-radius-size": "4px",
     "bdl-border-radius-size-med": "6px",
     "bdl-border-radius-size-large": "8px",
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 09593a05f0..d31377181a 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -85,7 +85,7 @@ export const menuZIndex = '170'; // menu-z-index
 export const submenuZIndex = '171'; // submenu-z-index
 export const overlayZIndex = '190'; // overlay-z-index
 export const tooltipZIndex = '190'; // tooltip-z-index
-export const notificationsWrapperZIndex = '200'; // notifications-wrapper-z-index
+export const notificationsWrapperZIndex = '400'; // notifications-wrapper-z-index
 export const bdlBorderRadiusSize = '4px'; // bdl-border-radius-size
 export const bdlBorderRadiusSizeMed = '6px'; // bdl-border-radius-size-med
 export const bdlBorderRadiusSizeLarge = '8px'; // bdl-border-radius-size-large