/*
 * Password reveal ("eye") toggle — see js/password_reveal.js.
 *
 * Deliberately unopinionated about colour: the button inherits currentColor so
 * the same rules work on the dark login card, the profile form, and the mobile
 * settings sheet without per-page theming.
 *
 * The input's right padding (the gutter the button sits in) is applied inline
 * by the JS, not here: page rules like `.modern-profile-form input[type="password"]`
 * out-specify any sane selector we could write, and the text would then run
 * underneath the button.
 */

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

.pw-reveal > input {
  box-sizing: border-box;
}

/* Edge ships its own reveal control; without this the field shows two eyes. */
.pw-reveal > input::-ms-reveal,
.pw-reveal > input::-ms-clear {
  display: none;
}

.pw-reveal__btn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.pw-reveal__btn:hover,
.pw-reveal__btn.is-revealed {
  opacity: 1;
}

.pw-reveal__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
  border-radius: 8px;
  opacity: 1;
}

.pw-reveal__icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  pointer-events: none;
}

.pw-reveal__icon--off {
  display: none;
}

.pw-reveal__btn.is-revealed .pw-reveal__icon--on {
  display: none;
}

.pw-reveal__btn.is-revealed .pw-reveal__icon--off {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .pw-reveal__btn {
    transition: none;
  }
}