Fix CSS for dots intervals in <pin-keyboard>

Introduce a separate variable that allows the user of the
<pin-keyboard> Polymer element to control the "letter-spacing" attribute
of the input field.

This fixes the flaky issue introduced in https://crrev.com/c/2069324
that was sometimes causing the "letter-spacing" attribute to be not set
on <pin-keyboard>'s input at all. (Presumably, the problem was due to
self-referring to the variable from its var() expression.)

Bug: 1051859
Test: start SAML login using a smart card, type 8 digits in the PIN dialog, verify that all 8 dots fit into the input field but the dots aren't touching each other
Change-Id: I0deb28782ddcd320bc3b6f35ddf10c1da0491233
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2082378
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#746385}

chrome/browser/resources/chromeos/login/security_token_pin.css

@@ -11,8 +11,8 @@
   --pin-keyboard-pin-input-style: {
     width: 192px;
   };
+  --pin-keyboard-input-letter-spacing: 14px;
   --pin-keyboard-number-color: var(--google-grey-900);
-  --cr-input-letter-spacing: 14px;
   --cr-icon-button-margin-start: 5px;
 }
 

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -149,7 +149,8 @@
         --cr-input-input: {
           font-size: 28px;
         };
-        --cr-input-letter-spacing: var(--cr-input-letter-spacing, 18px);
+        --cr-input-letter-spacing: var(--pin-keyboard-input-letter-spacing,
+                                       18px);
         --cr-input-padding-end: 0;
         --cr-input-padding-start: 0;
         background-color: white;