PDF Viewer: Fix separator padding on page number

By moving the `direction: rtl` CSS to an internal div,
direction-dependent CSS properties like margin are no longer affected
by the direction and can be used to correctly space out the host
element.

Bug: 1164840
Change-Id: I4d2c7d02284fe0b8a9593ea48ffd65fd9969d83e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2622657
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842689}

chrome/browser/resources/pdf/elements/viewer-page-selector.html

     <style>
-      :host {
+      /* A separate div is used because if the direction CSS property is applied
+       * to the host element, any margins or paddings set by the parent will be
+       * affected and be reversed. */
+      #content {
         align-items: center;
         color: #fff;
         direction: ltr;
@@ -37,8 +40,10 @@
         margin: 0 var(--page-selector-spacing);
       }
     </style>
-    <input part="input" type="text" id="pageselector" value="[[pageNo]]"
-        on-pointerup="select" on-input="onInput_" on-change="pageNoCommitted"
-        aria-label="$i18n{labelPageNumber}">
-    <span id="divider">/</span>
-    <span id="pagelength">[[docLength]]</span>
+    <div id="content">
+      <input part="input" type="text" id="pageselector" value="[[pageNo]]"
+          on-pointerup="select" on-input="onInput_" on-change="pageNoCommitted"
+          aria-label="$i18n{labelPageNumber}">
+      <span id="divider">/</span>
+      <span id="pagelength">[[docLength]]</span>
+    </div>
\ No newline at end of file