scanning: Update styling of select elements

Update the styling of the select elements to match the spec.

Before and after: http://shortn/_5kxnLLqx7m

Bug: 1059779
Change-Id: I44a6fd3a2978b2e66a202fd4f1c21906fcf30a06
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2591067Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837304}

chromeos/components/scanning/resources/scan_settings_section.html

@@ -11,13 +11,13 @@
 
   ::slotted([slot=label]),
   ::slotted([slot=settings]) {
-    @apply --scanning-select-font;
-    color: var(--scanning-select-text-color);
     display: flex;
     flex-direction: column;
   }
 
   ::slotted([slot=label]) {
+    @apply --scanning-select-font;
+    color: var(--scanning-select-text-color);
     flex: none;
     flex-basis: 68px;
     flex-grow: 0;

chromeos/components/scanning/resources/scanning_fonts_css.html

@@ -18,6 +18,8 @@
       --scanning-section-title-font-size: 22px;
       --scanning-select-font-size: 13px;
 
+      --scanning-select-line-height: 20px;
+
       --scanning-chevron-icon-color: var(--google-grey-700);
       --scanning-done-section-title-text-color: var(--google-grey-900);
       --scanning-done-section-option-text-color: var(--google-grey-900);
@@ -33,8 +35,9 @@
       }
 
       --scanning-select-font: {
-          font-family: var(--scanning-select-font-family);
-          font-size: var(--scanning-select-font-size);
+        font-family: var(--scanning-select-font-family);
+        font-size: var(--scanning-select-font-size);
+        line-height: var(--scanning-select-line-height);
       };
 
       --scanning-helper-text-font: {

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -5,7 +5,7 @@
 <link rel="stylesheet" href="chrome://resources/cr_elements/md_select_css.html">
 
 <template>
-  <style include="cr-shared-style md-select">
+  <style include="cr-shared-style md-select scanning-fonts">
     html {
       background-color: var(--cros-bg-color);
     }
@@ -16,6 +16,13 @@
       text-overflow: ellipsis;
     }
 
+    select.md-select {
+      @apply --scanning-select-font;
+      background-position-x: calc(100% - 12px);
+      color: var(--scanning-select-text-color);
+      padding-inline-start: 16px;
+    }
+
     @media (min-width: 600px) {
       :host {
         --container-width: 600px;