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/structures/_MatrixChat.pcss

@@ -80,7 +80,7 @@ limitations under the License.
 /* negative margin greater than its positive padding. If it's the same */
 /* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
 /* https://github.com/vector-im/element-web/issues/19863 happens. */
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle--horizontal {
     margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
     /* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
     /* (IF there is NO margin on the leftPanel_wrapper) */
@@ -94,7 +94,7 @@ limitations under the License.
     /* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
 }
 
-.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
     position: relative;
 
     &::before {