Fix resizer z-index conflicts

app/assets/stylesheets/app/_editor.scss

@@ -21,7 +21,7 @@ $heading-height: 75px;
 
   background-color: white;
   border-bottom: none;
-  z-index: 100;
+  z-index: $z-index-editor-title-bar;
 
   height: auto;
   overflow: visible;
@@ -96,7 +96,7 @@ $heading-height: 75px;
 
 .editor-content, #editor-content {
   flex: 1;
-  z-index: 10;
+  z-index: $z-index-editor-content;
   overflow-y: hidden;
   height: 100%;
   display: flex;

app/assets/stylesheets/app/_footer.scss

@@ -3,11 +3,11 @@
   width: 100%;
   height: $footer-height;
   max-height: $footer-height;
-  z-index: 100;
+  z-index: $z-index-footer-bar;
 }
 
 #footer-bar .item {
-  z-index: 1000;
+  z-index: $z-index-footer-bar-item;
   position: relative;
   user-select: none;
 
@@ -18,7 +18,7 @@
     left: 10px;
     bottom: 40px;
     min-width: 300px;
-    z-index: 1000;
+    z-index: $z-index-footer-bar-item-panel;
     margin-top: 15px;
     background-color: white;
   }

app/assets/stylesheets/app/_lock-screen.scss

@@ -11,7 +11,7 @@
   top: 0;
   bottom: 0;
 
-  z-index: 10000;
+  z-index: $z-index-lock-screen;
   background-color: rgba(white, 0.5);
   color: black;
   font-size: 16px;

app/assets/stylesheets/app/_main.scss

@@ -6,6 +6,21 @@ $selection-color: $bg-color;
 $selected-text-color: black;
 $blue-color: #086dd6;
 
+$z-index-editor-content: 10;
+
+$z-index-editor-title-bar: 100;
+$z-index-dropdown-menu: 100;
+
+$z-index-resizer-overlay: 1000;
+$z-index-panel-resizer: 1001;
+
+$z-index-footer-bar: 2000;
+$z-index-footer-bar-item: 2000;
+$z-index-footer-bar-item-panel: 2000;
+
+$z-index-lock-screen: 10000;
+$z-index-modal: 10000;
+
 html,
 body {
   font-family: -apple-system, BlinkMacSystemFont,
@@ -80,7 +95,7 @@ $footer-height: 32px;
   width: 100%;
   height: 100%;
   background-color: transparent;
-  z-index: 1000;
+  z-index: $z-index-resizer-overlay;
   opacity: 0;
 }
 
@@ -95,7 +110,7 @@ $footer-height: 32px;
   panel-resizer {
     top: 0;
     right: 0;
-    z-index: 1001;
+    z-index: $z-index-panel-resizer;
     width: 8px;
     height: 100%;
     position: absolute;

app/assets/stylesheets/app/_menus.scss

@@ -10,7 +10,7 @@
   left: 0;
   float: left;
   min-width: 160px;
-  z-index: 100;
+  z-index: $z-index-dropdown-menu;
 
   margin-top: 5px;
   width: 280px;

app/assets/stylesheets/app/_modals.scss

@@ -59,7 +59,7 @@
   right: 0;
   top: 0;
   bottom: 0;
-  z-index: 10000;
+  z-index: $z-index-modal;
   width: 100vw;
   height: 100vh;
   background-color: rgba(gray, 0.3);