Improve CSS rules of zoom buttons on live location (#8728)

* Use flex to stop redundant margin-top from appearing

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove ButtonResetDefault which resets nothing

It should be avoided to use ButtonResetDefault where there is nothing to be reset, in order to prevent resources from being wasted.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Ensure that unexpected regressions will never happen on the buttons and their icons

Rules can be extracted when needed. Until then there is no point of exposing elements to possible regressions, which could easily happen on the current architecture.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use SASS variables and remove a redundant declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Author: luixxiul

res/css/components/views/location/_ZoomButtons.scss

@@ -18,28 +18,28 @@ limitations under the License.
     position: absolute;
     bottom: $spacing-32;
     right: $spacing-24;
-}
-
-.mx_ZoomButtons_button {
-    @mixin ButtonResetDefault;
-
-    margin-top: $spacing-8;
-    border-radius: 4px;
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-
-    height: 24px;
-    width: 24px;
-
-    background: $background;
-    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
-}
-
-.mx_ZoomButtons_icon {
-    height: 10px;
-    width: 10px;
-
-    color: $primary-content;
+    flex-direction: column;
+    row-gap: $spacing-8;
+
+    .mx_ZoomButtons_button {
+        $ZoomButtons_button-size: 24px;
+
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: $ZoomButtons_button-size;
+        width: $ZoomButtons_button-size;
+        background: $background;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
+
+        .mx_ZoomButtons_icon {
+            $ZoomButtons_icon-size: 10px;
+
+            height: $ZoomButtons_icon-size;
+            width: $ZoomButtons_icon-size;
+            color: $primary-content;
+        }
+    }
 }