/* Password show/hide toggle - styles. Markup is added by assets/js/password-eye.js; see includes/password-eye.php for why this is shared by the storefront and the admin. */
.pw-wrap{position:relative;display:block}
/* The input is the one that must not move, so the padding goes on it rather than the
   button being floated over the text. 2.6em leaves room at any font size.

   display:block matters more than it looks. An inline-level input sits on a baseline, and
   the line box keeps room under it for descenders - measured, a 51px input inside a 58px
   wrapper. The button is height:100% of that wrapper, so it stood 7px taller than the box
   it belongs to and its centre drifted below the text. */
.pw-wrap > input{padding-right:2.6em !important;width:100%;display:block}
.pw-eye{position:absolute;top:0;right:0;height:100%;width:2.6em;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:#7185A0;line-height:0}
.pw-eye:hover{color:#20437D}
.pw-eye:focus-visible{outline:2px solid #20437D;outline-offset:-2px;border-radius:4px}
.pw-eye svg{width:18px;height:18px;display:block;pointer-events:none}
@media (prefers-reduced-motion:no-preference){ .pw-eye{transition:color .15s ease} }