/* Stylish password show/hide toggle.
   Used by templates/_macros/password_input.html — same styling everywhere. */

.pw-field-wrapper { position: relative; }

.pw-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.pw-input-group .pw-input {
  /* Reserve room for the toggle button on the right */
  padding-right: 2.75rem;
  width: 100%;
}

.pw-toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--color-text-quaternary, #6b7280);
  transition: color 120ms ease, transform 120ms ease;
  border-radius: 0 var(--radius-md, 6px) var(--radius-md, 6px) 0;
}

.pw-toggle-btn:hover,
.pw-toggle-btn:focus-visible {
  color: var(--color-accent, #2563eb);
  outline: none;
}

.pw-toggle-btn:active { transform: scale(0.92); }

.pw-toggle-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.pw-toggle-btn .pw-icon {
  display: block;
  transition: opacity 140ms ease, transform 140ms ease;
}

/* Default: showing the password is OFF -> show the "scan" icon
   (clicking will reveal the password) */
.pw-toggle-btn .pw-icon-hide { display: none; }

/* When toggled on (pressed=true): swap icons */
.pw-toggle-btn[aria-pressed="true"] .pw-icon-show { display: none; }
.pw-toggle-btn[aria-pressed="true"] .pw-icon-hide { display: block; }

/* Subtle entrance animation on toggle */
.pw-toggle-btn[aria-pressed="true"] .pw-icon-hide { animation: pwIconIn 160ms ease; }
.pw-toggle-btn[aria-pressed="false"] .pw-icon-show { animation: pwIconIn 160ms ease; }

@keyframes pwIconIn {
  from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* Glow tint when revealed — security-tooling vibe */
.pw-toggle-btn[aria-pressed="true"] {
  color: var(--color-accent, #2563eb);
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.45));
}