[MD settings] change spacing between controlledBy icon and control

chrome/browser/resources/settings/settings_vars_css.html

Index: chrome/browser/resources/settings/settings_vars_css.html
diff --git a/chrome/browser/resources/settings/settings_vars_css.html b/chrome/browser/resources/settings/settings_vars_css.html
index 69e23aca87364144ae59869ad44d3595971331b7..7994ea1a4bfc1a310d81b8cd6fb22ccc76bfd4dd 100644
--- a/chrome/browser/resources/settings/settings_vars_css.html
+++ b/chrome/browser/resources/settings/settings_vars_css.html
@@ -12,6 +12,7 @@
      * UX design (bettes@). */
 
     --settings-actionable: var(--cr-actionable);
+    --settings-button-padding: 12px;
 
     --settings-box-row-padding: 20px;
     --settings-box-row-indent: calc(
@@ -88,14 +89,13 @@
     --paper-checkbox-label-color: inherit;
     --paper-dialog-color: inherit;
 
-    --cr-icon-ripple-size: 40px;
     --paper-icon-button: {
       /**
-       * This makes the icons 20px (in combination with "--cr-icon-ripple-size:
-       * 40px"), since paper-icon-button>iron-icon width and height are
-       * hardcoded to 100%.
+       * This makes the icons 20px (in combination with --cr-icon-ripple-size),
+       * since paper-icon-button>iron-icon width and height are hardcoded to
+       *  100%.
        */
-      padding: 10px;
+      padding: var(--cr-icon-ripple-padding);
     };
     --paper-input-container-focus-color: var(--google-blue-500);
     --paper-input-container-input: {