/* Keep the reveal action inside the field with a keyboard-visible focus ring. */
.password-visibility { position:relative; min-width:0; width:100%; }
.password-visibility[hidden] { display:none !important; }
.password-visibility > input[data-password-field] {
  width:100%; box-sizing:border-box; min-height:3.25rem; padding-inline-end:3.6rem;
}
.password-visibility > .password-visibility-toggle {
  position:absolute; inset-inline-end:4px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:2.75rem; height:2.75rem; min-width:44px;
  min-height:44px; margin:0; padding:0; border:0; border-radius:6px;
  background:transparent; color:#b5ccdf; cursor:pointer; line-height:1;
}
.password-visibility > .password-visibility-toggle:hover { background:#203449; color:#a0edff; }
.password-visibility > .password-visibility-toggle:focus-visible { outline:2px solid #8ee7fa; outline-offset:1px; }
.password-visibility > .password-visibility-toggle:disabled { opacity:.45; cursor:default; }
.password-visibility-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.password-eye-slash { display:none; }
.password-visibility-toggle[aria-pressed="true"] .password-eye-slash { display:block; }