Fix style issues for right-to-left languages

ui/login/account_picker/md_user_pod_row.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
-  /* Temporarily disabled because animation interferes with updating screen's
-   size. */
   overflow: visible;
-  position: absolute;
 }
 
 /* Hide the pod row while images are loading. */
 podrow.images-loading {
   visibility: hidden;
 }
 
 pin-keyboard {
   display: block;
 }
@@ skipping 47 matching lines @@
               left 180ms ease-in-out,
               right 180ms ease-in-out,
               top 180ms ease-in-out,
               width 180ms ease-in-out;
   width: 96px;
   z-index: 3;
 }
 
 html[dir=rtl] .user-image-pane {
   left: auto;
-  right: 10px;
+  right: 105px;
 }
 
 .user-image-container {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
 }
 
@@ skipping 44 matching lines @@
 
 html:not([screen=login-add-user]) .pod.focused .user-image {
   opacity: 1;
 }
 
 .pod.multiprofiles-policy-applied .user-image {
   -webkit-filter: grayscale(100%);
 }
 
 .main-pane {
-  position: absolute;
   z-index: 2;
 }
 
-html[dir=rtl] .main-pane {
-  left: auto;
-  right: 10px;
-}
-
 .name-container {
   display: flex;
   position: absolute;
   top: 182px;
 }
 
 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
   display: flex;
   height: 40px;
   left: 51px;
   position: absolute;
   top: 244px;
 /* On chromeos we extend the width to cover the padding on the user pods. This
  is so the submit button on chromeos can extend onto the padding as shown on
  mocks. */
 <if expr="not chromeos">
   width: 160px;
 </if>
 <if expr="chromeos">
   width: 204px;
 </if>
 }
 
+html[dir=rtl] .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
+  left: auto;
+  right: 51px;
+}
+
 .auth-container .submit-button[disabled] {
   opacity: 0.34;
 }
 
 .auth-container .submit-button {
   color: #FFFFFF;
   height: 40px;
   opacity: 1;
   padding: 12px 0 4px 0;
   width: 24px;
@@ skipping 28 matching lines @@
   display: none;
 }
 
 .input-line {
   display: none;
   opacity: 0.34;
   position: absolute;
   stroke: #FFFFFF;
   stroke-width: 1px;
   top: 40px;
+  width: 204px;
 }
 
 .input-present .input-line {
   opacity: 1;
 }
 
 .pod[is-active-directory] .reauth-warning {
   display: none;
 }
 
@@ skipping 266 matching lines @@
   top: 0;
 }
 
 .action-box-area {
   opacity: 0;
   outline: none;
   transition: opacity 100ms;
   z-index: 4;
 }
 
-html[dir=rtl] .action-box-area {
-  left: 0;
-  position: absolute;
-  right: auto;
-}
-
 .action-box-area:focus,
 .action-box-area.hovered,
 .action-box-area.active,
 .action-box-area.forced {
   opacity: 1;
 }
 
 .action-box-button {
+  -webkit-margin-start: 8px;
   height: 24px;
-  margin: 3px 0 0 8px;
+  margin-top: 3px;
   padding: 0;
   width: 24px;
 }
 
 .action-box-button.ripple-circle {
   background: #FFF;
   border-radius: 50%;
   opacity: .08;
   position: absolute;
   transform: scale(0);
@@ skipping 75 matching lines @@
   background-image: url(../../webui/resources/images/fingerprint_failed.svg);
 }
 
 .action-box-menu {
   display: none;
   position: absolute;
   z-index: 6;
 }
 
 .action-box-area.active ~ .action-box-menu {
+  -webkit-margin-start: 12px;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 2px;
   display: flex;
   flex-direction: column;
   font-size: 13px;
-  margin: 3px 0 0 12px;
+  margin-top: 3px;
   width: 220px;
 }
 
 .action-box-area.active ~ .action-box-menu.left-edge-offset {
   left: 0 !important;
 }
 
 .action-box-area.active ~ .action-box-menu.right-edge-offset {
   right: 0 !important;
 }
 
 .action-box-area.active ~ .action-box-menu:not(.menu-moved-up) {
   top: 200px;
 }
 
 .action-box-area.active ~ .action-box-menu.menu-moved-up {
   bottom: 207px;
 }
 
 .action-box-area.menu-moved-up {
   transform: rotate(180deg);
 }
 
-html[dir=rtl] .action-box-area.active ~ .action-box-menu {
-  left: 5px;
-  right: auto;
-}
-
 .action-box-menu-title {
   color: #FFFFFF;
   display: flex;
   flex-direction: column;
   padding: 13px 14px 18px;
 }
 
 .action-box-menu-title:focus {
   outline-style: none;
 }
@@ skipping 81 matching lines @@
   position: absolute;
   top: 35px;
   transition: all 100ms;
   visibility: hidden;
   width: 200px;
   z-index: 7;
 }
 
 html[dir=rtl] .user-type-bubble {
   left: auto;
-  right: 5px;
+  right: 36px;
 }
 
 .bubble-shown,
 .user-type-icon-area.policy:hover ~ .user-type-bubble {
   opacity: 1;
   visibility: visible;
 }
 
 .user-type-bubble-header {
   font-weight: bold;
@@ skipping 103 matching lines @@
 .public-account-info-container .learn-more {
   --iron-icon-height: 12px;
   --iron-icon-width: 12px;
   display: block;
   opacity: .67;
   padding: 0;
   position: absolute;
 }
 
 .public-account-info-container .info {
+  -webkit-padding-start: 8px;
   color: rgba(255, 255, 255, .67);
   font-family: "Roboto";
   font-size: 13px;
   overflow: hidden;
-  padding-left: 8px;
   position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .pod.public-account .button-container {
   background: rgba(255, 255, 255, .17);
   border-radius: 50%;
   display: none;
   height: 40px;
   left: 133px;
   position: absolute;
   top: 59px;
   width: 40px;
 }
 
+html[dir=rtl] .pod.public-account .button-container {
+  left: auto;
+  right: 133px;
+}
+
 .pod.public-account .button-container.forced,
 .pod.public-account.hovered .button-container,
 .pod.public-account.focused .button-container {
   display: block;
 }
 
 .pod.public-account.expanded .button-container {
   display: none;
 }
 
@@ skipping 81 matching lines @@
 .enter-button-container {
   background-color: #4285F4;
   border-radius: 50%;
   bottom: 28px;
   height: 40px;
   position: absolute;
   right: 28px;
   width: 40px;
 }
 
+html[dir=rtl] .enter-button-container {
+  left: 28px;
+  right: auto;
+}
+
 .language-and-input-dropdown {
+  -webkit-margin-start: 6px;
   height: 16px;
-  margin-left: 6px;
   padding: 0;
   width: 16px;
 }
 
 /* Animations for the animated ellipsis: */
 .animated-ellipsis-component0 {
   animation: ellipsis-component0 1.5s infinite;
 }
 
 @keyframes ellipsis-component0 {
@@ skipping 80 matching lines @@
   opacity: 1;
   outline: none;
   overflow: hidden;
   padding: 23px 0;
   position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 214px;
 }
 
+html[dir=rtl] .small-pod-name {
+  left: auto;
+  right: 90px;
+}
+
 .small-pod.extra-small .small-pod-name {
   left: 76px;
   padding: 16px 0;
   width: 190px;
 }
 
+html[dir=rtl] .small-pod.extra-small .small-pod-name {
+  left: auto;
+  right: 76px;
+}
+
 @keyframes switch-image {
   from { transform: rotate3d(0, 1, 0, 90deg); }
   to { transform: none; }
 }