Update _ResizeHandle.pcss (#10772)

* Nesting: `mx_ResizeHandle`

* Nesting: `> div`

* Run prettier

* Use a custom property

* Remove a redundant declaration: `cursor: row-resize`

The resizer is either vertical or horizontal, and since `cursor: row-resize` is applied by default, it does not need to be repeated here.

* Conform the class names to the naming policy

* Revert "Use a custom property"

This reverts commit 6116939eec7d9e4220b89a638623e5876e143adf.

res/css/views/elements/_ResizeHandle.pcss

@@ -18,25 +18,24 @@ limitations under the License.
     cursor: row-resize;
     flex: 0 0 auto;
     z-index: 100;
-}
 
-.mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 -5px;
-    padding: 0 5px;
-    cursor: col-resize;
-}
+    &.mx_ResizeHandle--horizontal {
+        margin: 0 -5px;
+        padding: 0 5px;
+        cursor: col-resize;
 
-.mx_ResizeHandle.mx_ResizeHandle_vertical {
-    margin: -5px 0;
-    padding: 5px 0;
-    cursor: row-resize;
-}
+        > div {
+            width: 1px;
+            height: 100%;
+        }
+    }
 
-.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
-    width: 1px;
-    height: 100%;
-}
+    &.mx_ResizeHandle--vertical {
+        margin: -5px 0;
+        padding: 5px 0;
 
-.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
-    height: 1px;
+        > div {
+            height: 1px;
+        }
+    }
 }

res/css/views/rooms/_AppsDrawer.pcss

@@ -75,7 +75,7 @@ $MinWidth: 240px;
             background: $primary-content;
         }
 
-        .mx_ResizeHandle_horizontal::before {
+        .mx_ResizeHandle--horizontal::before {
             position: absolute;
             left: 3px;
             top: 50%;
@@ -140,7 +140,7 @@ $MinWidth: 240px;
         border-radius: 0 10px 10px 0;
     }
 
-    .mx_ResizeHandle_horizontal {
+    .mx_ResizeHandle--horizontal {
         position: relative;
 
         > div {