/* Show or hide a password (templates/partials/password.html,
   static/js/joripo-password.js): the toggle sits inside the field's right
   edge, the field keeps the look of its page. Loaded by every page shell
   (sign-in, Joripo 2.0, Legacy, Master Admin); colours are tokens.css's. */
.pw-field { position: relative; display: block; }
/* The toggle is placed on the field's box, so the field has no margin of
   its own here, whatever its page's sheet gives inputs (a page that spaces
   its fields with an input's margin puts it on the .pw-field instead). */
.pw-field > input { box-sizing: border-box; width: 100%; margin: 0 !important; }
/* room for the toggle once it is shown (beats each console's own padding) */
.pw-field.pw-on > input[type] { padding-right: 46px; }
.pw-field > button.pw-toggle { position: absolute; top: 3px; bottom: 3px; right: 3px; width: 38px;
  min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; display: inline-grid;
  place-items: center; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--ink-600); font: inherit; cursor: pointer; }
.pw-field > button.pw-toggle[hidden] { display: none; }
.pw-field > button.pw-toggle:hover { background: var(--surface-2); color: var(--ink-900); }
.pw-field > button.pw-toggle:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.pw-toggle .ic { display: block; width: 18px; height: 18px; }
/* the eye while hidden, the struck eye while shown */
.pw-toggle[aria-pressed="true"] .pw-show, .pw-toggle:not([aria-pressed="true"]) .pw-hide { display: none; }
@media (forced-colors: active) {
  .pw-field > button.pw-toggle { border: 1px solid ButtonText; color: ButtonText; }
}