/* Show/hide control for password boxes. The button is injected by
   password-toggle.js, so nothing here applies until that has run. */

/* Note for hosts with a LEADING icon inside the field:
   this wrapper is positioned and is inserted *after* that icon in the DOM, so
   the input inside it paints over an absolutely-positioned sibling icon that
   carries no z-index. The symptom is oddly specific — the icon disappears on
   the password field only, while the same icon on the email field beside it is
   fine. Give the icon `z-index:1` (see resources/views/auth/login.blade.php).
   Fixed host-side rather than here because only the host knows which element
   is its icon. */
.pw-field{position:relative;display:block}

.pw-field > input{
  width:100%;
  /* !important beats the inline `padding:` most of these fields carry —
     without it, typed characters run underneath the button. */
  padding-right:42px !important;
}

/* Edge and Safari draw reveal/clear controls of their own; two eyes in one
   box reads worse than none. */
.pw-field > input::-ms-reveal,
.pw-field > input::-ms-clear{display:none}

.pw-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:0;border-radius:8px;
  background:none;color:#94A3B8;cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.pw-toggle:hover{color:var(--text,#2D3748);background:rgba(148,163,184,.16)}
.pw-toggle:focus-visible{outline:2px solid var(--primary,#00B894);outline-offset:1px}
.pw-toggle svg{
  width:18px;height:18px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

[data-motion="reduced"] .pw-toggle{transition:none}
@media (prefers-reduced-motion:reduce){.pw-toggle{transition:none}}