Navi: Use REM instead of PX to allow scaling the chooser with font.

Screenshot in bug.

Bug: 930650
Change-Id: I2a0e791832b902e43b874e8bae479afc15524141
Reviewed-on: https://chromium-review.googlesource.com/c/1467671
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#631826}
diff --git a/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html b/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
index 0f97022..0b8da5b 100644
--- a/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
@@ -34,6 +34,7 @@
         content: -webkit-image-set(
           url(../images/set_as_default_illustration_1x.png) 1x,
           url(../images/set_as_default_illustration_2x.png) 2x);
+        margin: auto;
         width: 454px;
       }
 
diff --git a/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html b/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html
index 5caf897..23499fb 100644
--- a/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html
@@ -23,16 +23,16 @@
         display: inline-flex;
         flex-direction: column;
         font-family: inherit;
-        height: 84px;
+        height: 5.25rem;
         justify-content: center;
         outline: 0;
         position: relative;
         vertical-align: bottom;
-        width: 104px;
+        width: 6.5rem;
       }
 
       .option:not(:first-of-type) {
-        margin-inline-start: 24px;
+        margin-inline-start: 1.5rem;
       }
 
       .option.keyboard-focused:focus {
@@ -51,18 +51,18 @@
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
-        height: 32px;
+        height: 2rem;
         margin: auto;
-        width: 32px;
+        width: 2rem;
       }
 
       .option .option-icon-shadow {
         background-color: var(--google-grey-refresh-100);
         border-radius: 50%;
         display: flex;
-        height: 48px;
-        margin-bottom: 4px;
-        width: 48px;
+        height: 3rem;
+        margin-bottom: 0.25rem;
+        width: 3rem;
       }
 
       .option iron-icon {
@@ -70,12 +70,12 @@
         background: lightgrey;
         border-radius: 50%;
         display: none;
-        height: 12px;
+        height: 0.75rem;
         margin: 0;
         position: absolute;
-        right: 6px;
-        top: 6px;
-        width: 12px;
+        right: 0.375rem;
+        top: 0.375rem;
+        width: 0.75rem;
       }
 
       .option.keyboard-focused:focus iron-icon[icon='cr:check'],
@@ -97,7 +97,7 @@
       .button-bar {
         display: flex;
         justify-content: space-between;
-        margin-top: 64px;
+        margin-top: 4rem;
       }
 
       :host-context([dir=rtl]) iron-icon {
@@ -105,10 +105,10 @@
       }
 
       iron-icon[icon='cr:chevron-right'] {
-        height: 20px;
-        margin-inline-end: -10px;
-        margin-inline-start: 6px;
-        width: 20px;
+        height: 1.25rem;
+        margin-inline-end: -0.625rem;
+        margin-inline-start: 0.375rem;
+        width: 1.25rem;
       }
     </style>
   </template>