[MD settings] separate spacing of controlled-by icon and control-label

chrome/browser/resources/settings/controls/settings_slider.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 
 <dom-module id="settings-slider">
   <template>
     <style>
       :host {
         --calculated-paper-slider-height: var(--paper-slider-height, 2px);
         /* Counteract the margin on #sliderContainer in paper-slider.html. */
         -webkit-margin-end:
             calc(-15px - var(--calculated-paper-slider-height) / 2);
         display: inline-flex;
       }
 
       cr-policy-pref-indicator {
-        -webkit-margin-start: var(--settings-control-spacing);
+        -webkit-margin-start: var(--settings-controlled-by-spacing);
         align-self: center;
       }
 
       #labels[disabled] {
         color: var(--paper-grey-400);
       }
 
       div.outer {
         align-items: stretch;
         display: flex;
@@ skipping 40 matching lines @@
           min="[[min]]">
       </paper-slider>
       <div id="labels" disabled$="[[disableSlider_]]">
         <div id="label-begin">[[labelMin]]</div>
         <div id="label-end">[[labelMax]]</div>
       </div>
     </div>
   </template>
   <script src="settings_slider.js"></script>
 </dom-module>