/* The show/hide control on a password field.
 *
 * Its own sheet rather than more of forms.css, which was at the 200-line ceiling.
 * The split is along a real line: forms.css styles the field idioms every screen
 * uses, while this is one optional control that only the two change-password
 * surfaces and the reset form load. Both link it explicitly.
 *
 * Behaviour is pkg/webui/static/password-toggle.js; CSP forbids inline handlers.
 */

/* ---- show/hide affix (password fields) ----------------------------------- */
/* The third flex child of .input-group: leading icon, control, trailing button.
 *
 * It is a real <button type="button">, not an icon with a click handler. Without
 * the explicit type it would default to submit and every reveal would post the
 * form; and a <span> would be unreachable by keyboard, on a control whose whole
 * purpose is to help someone who cannot see what they are typing.
 *
 * No focus ring of its own: .input-group:focus-within already lights the whole
 * box, and a second ring nested inside the first reads as a rendering fault.
 * Keyboard users still get the box, which is the visible target. */
.input-group .input-affix {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--sn-on-surface-variant);
  cursor: pointer;
  min-height: 0;
}
.input-group .input-affix:hover { color: var(--sn-on-surface); }
.input-group .input-affix:focus { outline: none; box-shadow: none; }

/* Both glyphs ship in the button and CSS picks one, rather than script rewriting
 * the markup. The two surfaces draw an icon differently — the console points at
 * the sprite with <use>, the auth pages inline the SVG because a Custom Tab
 * webview may not resolve an external reference — and keying on aria-pressed
 * means the same rule serves both, with the ARIA state and the picture unable to
 * disagree. */
.input-affix .pw-icon-hide { display: none; }
.input-affix[aria-pressed="true"] .pw-icon-show { display: none; }
.input-affix[aria-pressed="true"] .pw-icon-hide { display: inline-flex; }