MC-4150: Widget placeholder and variable placeholder styling is broken on inline editing

- Updated less nesting

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_typography.less

@@ -167,7 +167,7 @@ body {
         background: @placeholder-background;
         box-sizing: initial;
         color: @color-black;
-        cursor: pointer !important;
+        cursor: pointer;
         display: inline-block;
         font-size: 14px;
         font-style: normal;
@@ -184,36 +184,40 @@ body {
         display: inline-block;
         height: 20px;
         margin: 0 5px;
-        outline: 2px solid @placeholder-error-outline !important;
+        outline: 2px solid @placeholder-error-outline;
         padding: 2px 4px;
         vertical-align: bottom;
-    }
 
-    .magento-placeholder-error:before {
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWUlEQVR42qVTS07DMBD1pggqcQAQEofINbrNvh977Au04gJtxZYiVZwLJJasAhJJ3LBrI4Xwxm3SKErCz9Koqec9e/xmnhBYdjK5tlo/R8ZsI63XIdGFqK1QSg+5MNY6scbMXobDU5eIpbyKiaZIpLExOX4/cdg6IOoXZP6OlbpDPjtgUks0y4l6An8esbl1iUPghgyA5ZPvnzAo0XphC/IRkyZKKVEnl8GVEK04+LsRY8yb4HJbAVpnLprJmVVqIcLx+DIieqiX2Bl8ITQB93wv0mDQb3pnGxkXLqsiu8WCufd2H5KBfM/Yepv/d0Du+2c/fQJjIilvyyfwhLEgvxHR7itZORFjHs82clcbuRNazwXm/uOvg4RKAoFSbkofVMjJN6MMzG5DNBI5XAVDTeG0XaE0a9JpJviADejM5LrgeT1UMsJmAOC8nLCqnbG3QQ6Y13ciWbTyC+DUOUqNY1A2AAAAAElFTkSuQmCC);
-        background-position-x: 1px;
-        background-position-y: 1px;
-        background-repeat: no-repeat;
-        content: '';
-        display: inline-block;
-        height: inherit;
-        margin-right: 4px;
-        vertical-align: middle;
-        width: 20px;
+        img {
+            display: none;
+        }
+
+        &:before {
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWUlEQVR42qVTS07DMBD1pggqcQAQEofINbrNvh977Au04gJtxZYiVZwLJJasAhJJ3LBrI4Xwxm3SKErCz9Koqec9e/xmnhBYdjK5tlo/R8ZsI63XIdGFqK1QSg+5MNY6scbMXobDU5eIpbyKiaZIpLExOX4/cdg6IOoXZP6OlbpDPjtgUks0y4l6An8esbl1iUPghgyA5ZPvnzAo0XphC/IRkyZKKVEnl8GVEK04+LsRY8yb4HJbAVpnLprJmVVqIcLx+DIieqiX2Bl8ITQB93wv0mDQb3pnGxkXLqsiu8WCufd2H5KBfM/Yepv/d0Du+2c/fQJjIilvyyfwhLEgvxHR7itZORFjHs82clcbuRNazwXm/uOvg4RKAoFSbkofVMjJN6MMzG5DNBI5XAVDTeG0XaE0a9JpJviADejM5LrgeT1UMsJmAOC8nLCqnbG3QQ6Y13ciWbTyC+DUOUqNY1A2AAAAAElFTkSuQmCC);
+            background-position-x: 1px;
+            background-position-y: 1px;
+            background-repeat: no-repeat;
+            content: '';
+            display: inline-block;
+            height: inherit;
+            margin-right: 4px;
+            vertical-align: middle;
+            width: 20px;
+        }
+
+        &[data-mce-selected] {
+            outline: 2px solid @placeholder-error-outline-mce;
+        }
     }
 
-    .magento-placeholder-error img {
-        display: none;
-    }
 
-    .magento-placeholder-error[data-mce-selected] {
-        outline: 2px solid @placeholder-error-outline-mce !important;
-    }
 
-    .magento-placeholder-error img,
-    .magento-placeholder img {
-        margin-right: 5px;
-        max-height: 20px;
-        vertical-align: middle;
+    .magento-placeholder-error,
+    .magento-placeholder {
+        img {
+            margin-right: 5px;
+            max-height: 20px;
+            vertical-align: middle;
+        }
     }
 }