Remove an obsolete variable and use a custom property for Slider (#10779)

Author: luixxiul

res/css/_common.pcss

@@ -27,9 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
 
 $selected-message-border-width: 4px;
 
-$slider-dot-size: 1em;
-$slider-selection-dot-size: 2.4em;
-
 $timeline-image-border-radius: 8px;
 :root {
     font-size: 10px;

res/css/views/elements/_Slider.pcss

@@ -27,6 +27,7 @@ limitations under the License.
         font-size: 1em; // set base multiplier for em units applied later
 
         --active-color: $accent;
+        --selection-dot-size: 2.4em;
 
         &:disabled {
             cursor: not-allowed;
@@ -47,12 +48,12 @@ limitations under the License.
         }
         &::-webkit-slider-thumb {
             border: 0 solid #000000;
-            width: $slider-selection-dot-size;
-            height: $slider-selection-dot-size;
+            width: var(--selection-dot-size);
+            height: var(--selection-dot-size);
             background: var(--active-color);
             border-radius: 50%;
             -webkit-appearance: none;
-            margin-top: calc(2px + 1.2em - $slider-selection-dot-size);
+            margin-top: calc(2px + 1.2em - var(--selection-dot-size));
         }
         &:focus::-webkit-slider-runnable-track {
             background: $slider-background-color;
@@ -73,8 +74,8 @@ limitations under the License.
         }
         &::-moz-range-thumb {
             border: 0 solid #000000;
-            width: $slider-selection-dot-size;
-            height: $slider-selection-dot-size;
+            width: var(--selection-dot-size);
+            height: var(--selection-dot-size);
             background: var(--active-color);
             border-radius: 50%;
         }
@@ -94,8 +95,8 @@ limitations under the License.
         }
         &::-ms-thumb {
             margin-top: 1px;
-            width: $slider-selection-dot-size;
-            height: $slider-selection-dot-size;
+            width: var(--selection-dot-size);
+            height: var(--selection-dot-size);
             background: var(--active-color);
             border-radius: 50%;
         }