Tidy style rules related to mx_Dialog (#10549)

* Nest - .mx_Dialog .markdown-body

* Nest - .mx_Dialog .markdown-body *

* Run prettier

* Nest

* Nest - * .mx_Dialog_background

* Run prettier

* Nest - * .mx_Dialog

* Nest - mx_Dialog_title.danger

* Use a variable for z-index: default wrapper index

* Use a variable for z-index: static dialog background

* Use a variable for z-index: static dialog itself

* Use a variable for z-index: standard dialog background

* Use a variable for z-index: standard dialog

* Merge :root selector blocks

* Calculate z-index values to fix the order

* Rename the variables

* Include mx_Dialog_buttons_row in mx_Dialog_buttons

mx_Dialog_buttons_row is used on DialogButtons.tsx only inside mx_Dialog_buttons under {additive}

* Run prettier

* Nest `pre code` in `pre`

res/css/_common.pcss

@@ -33,6 +33,22 @@ limitations under the License.
     --buttons-dialog-gap-row: $spacing-8;
     --buttons-dialog-gap-column: $spacing-8;
     --MBody-border-radius: 8px;
+
+    /* Expected z-indexes for dialogs:
+        4000 - Default wrapper index
+        4009 - Static dialog background
+        4010 - Static dialog itself
+        4011 - Standard dialog background
+        4012 - Standard dialog itself
+
+       These are set up such that the static dialog always appears
+       underneath the standard dialogs.
+     */
+    --dialog-zIndex-wrapper-default: 4000;
+    --dialog-zIndex-static-background: 4009;
+    --dialog-zIndex-static: calc(var(--dialog-zIndex-static-background) + 1); /* 4010 */
+    --dialog-zIndex-standard-background: calc(var(--dialog-zIndex-static) + 1); /* 4011 */
+    --dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */
 }
 
 @media only percy {
@@ -277,20 +293,9 @@ legend {
     color: $secondary-accent-color;
 }
 
-/* Expected z-indexes for dialogs:
-    4000 - Default wrapper index
-    4009 - Static dialog background
-    4010 - Static dialog itself
-    4011 - Standard dialog background
-    4012 - Standard dialog itself
-
-   These are set up such that the static dialog always appears
-   underneath the standard dialogs.
- */
-
 .mx_Dialog_wrapper {
     position: fixed;
-    z-index: 4000;
+    z-index: var(--dialog-zIndex-wrapper-default);
     top: 0;
     left: 0;
     width: 100%;
@@ -304,7 +309,7 @@ legend {
 .mx_Dialog {
     background-color: $background;
     color: $light-fg-color;
-    z-index: 4012;
+    z-index: var(--dialog-zIndex-standard);
     font-size: $font-15px;
     position: relative;
     padding: 24px;
@@ -312,10 +317,25 @@ legend {
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     border-radius: 8px;
     overflow-y: auto;
-}
 
-/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */
+    .mx_Dialog_staticWrapper & {
-.mx_Dialog .markdown-body {
+        z-index: var(--dialog-zIndex-static);
+        contain: content;
+    }
+
+    .mx_Dialog_lightbox & {
+        border-radius: 0px;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        pointer-events: none;
+        padding: 0;
+    }
+
+    /* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */
+    .markdown-body {
         font-family: inherit !important;
         white-space: normal !important;
         line-height: inherit !important;
@@ -333,14 +353,6 @@ legend {
             white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
         }
 
-    pre code {
-        white-space: pre; /* we want code blocks to be scrollable and not wrap */
-
-        > * {
-            display: inline;
-        }
-    }
-
         pre {
             /* have to use overlay rather than auto otherwise Linux and Windows */
             /* Chrome gets very confused about vertical spacing: */
@@ -351,34 +363,43 @@ legend {
             &::-webkit-scrollbar-corner {
                 background: transparent;
             }
-    }
-}
 
-.mx_Dialog .markdown-body h1,
+            code {
-.mx_Dialog .markdown-body h2,
+                white-space: pre; /* we want code blocks to be scrollable and not wrap */
-.mx_Dialog .markdown-body h3,
+
-.mx_Dialog .markdown-body h4,
+                > * {
-.mx_Dialog .markdown-body h5,
+                    display: inline;
-.mx_Dialog .markdown-body h6 {
+                }
+            }
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
             font-family: inherit !important;
             color: inherit;
-}
+        }
 
-/* Make h1 and h2 the same size as h3. */
+        /* Make h1 and h2 the same size as h3. */
-.mx_Dialog .markdown-body h1,
+        h1,
-.mx_Dialog .markdown-body h2 {
+        h2 {
             font-size: 1.5em;
             border-bottom: none !important; /* override GFM */
-}
+        }
 
-.mx_Dialog .markdown-body a {
+        a {
             color: $accent-alt;
-}
+        }
 
-.mx_Dialog .markdown-body blockquote {
+        blockquote {
             border-left: 2px solid $blockquote-bar-color;
             border-radius: 2px;
             padding: 0 10px;
+        }
+    }
 }
 
 .mx_Dialog_fixedWidth {
@@ -386,11 +407,6 @@ legend {
     max-width: 704px;
 }
 
-.mx_Dialog_staticWrapper .mx_Dialog {
-    z-index: 4010;
-    contain: content;
-}
-
 .mx_Dialog_background {
     position: fixed;
     top: 0;
@@ -399,41 +415,24 @@ legend {
     height: 100%;
     background-color: $dialog-backdrop-color;
     opacity: 0.8;
-    z-index: 4011;
+    z-index: var(--dialog-zIndex-standard-background);
-}
 
-.mx_Dialog_background.mx_Dialog_staticBackground {
+    &.mx_Dialog_staticBackground {
-    z-index: 4009;
+        z-index: var(--dialog-zIndex-static-background);
-}
+    }
 
-.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
+    .mx_Dialog_wrapperWithStaticUnder & {
         /* Roughly half of what it would normally be - we don't want to black out */
         /* the app, just make it clear that the dialogs are stacked. */
         opacity: 0.4;
-}
+    }
 
-.mx_Dialog_lightbox .mx_Dialog_background {
+    .mx_Dialog_lightbox & {
         opacity: $lightbox-background-bg-opacity;
         background-color: $lightbox-background-bg-color;
         animation-name: mx_Dialog_lightbox_background_keyframes;
         animation-duration: 300ms;
-}
+    }
-
-.mx_Dialog_lightbox .mx_Dialog {
-    border-radius: 0px;
-    background-color: transparent;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    pointer-events: none;
-    padding: 0;
-}
-
-.mx_Dialog_header {
-    position: relative;
-    padding: 3px 0;
-    margin-bottom: 10px;
 }
 
 .mx_Dialog_titleImage {
@@ -450,22 +449,29 @@ legend {
     display: inline-block;
     width: 100%;
     box-sizing: border-box;
+
+    &.danger {
+        color: $alert;
+    }
 }
 
-.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
+.mx_Dialog_header {
+    position: relative;
+    padding: 3px 0;
+    margin-bottom: 10px;
+
+    &.mx_Dialog_headerWithButton > .mx_Dialog_title {
         text-align: center;
-}
+    }
-.mx_Dialog_header.mx_Dialog_headerWithCancel {
-    padding-right: 20px; /* leave space for the 'X' cancel button */
-}
 
-.mx_Dialog_header.mx_Dialog_headerWithCancelOnly {
+    &.mx_Dialog_headerWithCancel {
+        padding-right: 20px; /* leave space for the 'X' cancel button */
+    }
+
+    &.mx_Dialog_headerWithCancelOnly {
         padding: 0 20px 0 0;
         margin: 0;
-}
+    }
-
-.mx_Dialog_title.danger {
-    color: $alert;
 }
 
 @define-mixin customisedCancelButton {
@@ -505,9 +511,8 @@ legend {
         /* The consumer is responsible for positioning their elements. */
         float: left;
     }
-}
 
-.mx_Dialog_buttons_row {
+    .mx_Dialog_buttons_row {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
@@ -521,6 +526,7 @@ legend {
         button {
             margin: 0 !important; /* override the margin settings */
         }
+    }
 }
 
 @define-mixin mx_DialogButton {