/* Show/hide button for password fields (Login page; see wwwroot/js/password-toggle.js).
   The button sits at the right end of the field inside .md-form: MDB's floating label needs the input to stay a
   sibling of its label, so the input is not wrapped. */
.md-form.pw-field {
  position: relative;
}

/* room for the eye, so typed text never runs under it */
.md-form.pw-field input.form-control.pw-input {
  padding-right: 40px;
}

/* Edge adds its own reveal button to password fields; this one replaces it */
.pw-input::-ms-reveal,
.pw-input::-ms-clear {
  display: none;
}

/* top and height follow the field (set by password-toggle.js) */
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #757575;
  cursor: pointer;
}

.pw-toggle[hidden] {
  display: none;
}

.pw-toggle:hover {
  color: #212529;
}

.pw-toggle:focus {
  outline: none;
}

.pw-toggle:focus-visible {
  color: #212529;
  box-shadow: 0 0 0 2px #4285f4;
}

.pw-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* the eye means "show"; once the password is visible, the crossed-out eye means "hide" */
.pw-toggle[aria-pressed="true"] .pw-icon-show,
.pw-toggle:not([aria-pressed="true"]) .pw-icon-hide {
  display: none;
}