/* ===========================================================================
   Password show/hide toggle
   Append to accounts.css, or link separately after it.
   =========================================================================== */

.password-wrap {
  position: relative;
  display: block;
}

/* Room for the button so long passwords do not run underneath it. */
.password-wrap input[type="password"],
.password-wrap input[type="text"] {
  width: 100%;
  padding-right: 46px !important;
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;              /* 44px is the minimum comfortable touch target */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--c-text-muted);
  transition: color .15s ease;
}

.password-toggle:hover {
  color: var(--c-ink);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
  border-radius: var(--radius);
}

/* Pressed state reads as "currently showing" */
.password-toggle[aria-pressed="true"] {
  color: var(--c-accent);
}

.password-toggle svg {
  display: block;
  pointer-events: none;
}

/* Screen-reader-only text for the live region */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hide the browser's own reveal control so there are not two eyes.
   Edge and IE render -ms-reveal; recent Chrome does not add one. */
.password-wrap input::-ms-reveal,
.password-wrap input::-ms-clear {
  display: none;
}