Make sure to apply backdrops only to one Overlay (#2249)

* Make sure to apply backdrops only to one Overlay

* Update overlay.scss

* Create stale-drinks-arrive.md

* Update stale-drinks-arrive.md

Co-authored-by: Katie Langerman <[email protected]>
Co-authored-by: Josep Martins <[email protected]>

Author: 3 people

.changeset/stale-drinks-arrive.md

@@ -0,0 +1,6 @@
+---
+"@primer/css": patch
+---
+
+Increase specificy for Overlay styles as they relate to the backdrop and positioning options
+- If a Dialog opens a second Dialog, each Dialog properties should be contained to its own scope

src/overlay/overlay.scss

@@ -345,7 +345,7 @@ $primer-borderRadius-large: 0.75rem;
     align-items: center;
     justify-content: left;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
       height: 100vh;
       max-height: unset;
       border-radius: $primer-borderRadius-large;
@@ -362,7 +362,7 @@ $primer-borderRadius-large: 0.75rem;
     align-items: center;
     justify-content: right;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
       height: 100vh;
       max-height: unset;
       border-radius: $primer-borderRadius-large;
@@ -379,7 +379,7 @@ $primer-borderRadius-large: 0.75rem;
     align-items: end;
     justify-content: center;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
       width: 100vw;
       height: auto;
       max-height: calc(100vh - 2rem);
@@ -397,7 +397,7 @@ $primer-borderRadius-large: 0.75rem;
     align-items: start;
     justify-content: center;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
       border-radius: $primer-borderRadius-large;
       border-top-left-radius: 0;
       border-top-right-radius: 0;