/* Password show/hide toggle (#3481) — js/components/password-reveal.js wraps
   every password input in .pw-reveal and adds a .pw-reveal-btn after it.

   Linked after tokens.css on every page that serves a password field
   (index.php, invite.php, reset-password.php).

   WHY THE !important
   The toggle is a <button> inside forms whose own button rules are
   id-scoped or broad — `button {}` (base-layout.css), `.auth-form button`
   (auth.css: primary fill, full width), `body.auth-guest #auth-center-slot
   #auth-controls button` (full width). Any of them would turn the eye into a
   full-width submit button. It is a component dropped into those forms, so it
   isolates the properties they set rather than every form excluding it.
   Likewise the input's right padding: the sign-in card sets the padding
   shorthand from an id selector. */

/* One toggle, ours: Edge draws its own reveal eye on password fields. */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

.pw-reveal {
  position: relative;
  display: block;
  width: 100%;
}

/* The page hides fields by putting .hidden on the INPUT (the sign-in card's
   setup-only confirmation, every field once signed in). The wrapper and its
   button must go with it. */
.pw-reveal:has(> input.hidden) {
  display: none;
}

.pw-reveal > .pw-reveal-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.75rem !important;
}

.pw-reveal > .pw-reveal-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 2.5rem !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: var(--clr-muted) !important;
  cursor: pointer;
  line-height: 1;
}

.pw-reveal > .pw-reveal-btn:hover {
  color: var(--clr-text) !important;
  background: transparent !important;
}

.pw-reveal > .pw-reveal-btn:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -4px;
}

.pw-reveal-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* invite / reset run on the auth palette (gray ramp, never themed). */
.auth-form .pw-reveal > .pw-reveal-btn {
  color: var(--auth-clr-muted) !important;
  border-radius: var(--auth-radius) !important;
}

.auth-form .pw-reveal > .pw-reveal-btn:hover {
  color: var(--auth-clr-text) !important;
}

.auth-form .pw-reveal > .pw-reveal-btn:focus-visible {
  outline-color: var(--auth-clr-primary);
}