/* Show / hide ("eye") toggle for password fields — see js/password-toggle.js.
   The wrapper is injected around the input at runtime, so these rules only
   ever apply to fields the script has wired up. */

.pw-toggle-wrap {
    position: relative;
    display: block;
}

/* Keep typed text clear of the icon. Matches the button width below. */
.pw-toggle-wrap > input {
    padding-right: 34px;
}

/* Anchored to the field's right edge and stretched to its full height: the
   icon's inset is then just half the leftover width (34 - ~14 glyph = ~10px),
   which lines up with .form-control's own .75rem/12px text padding. Giving the
   button the full height also makes the whole right end of the field clickable
   rather than a 22px target floating in the middle of it.
   Two classes on purpose: style.css gives every button[type="button"] a 15px
   right margin, which outranks a single class and pushed the icon 15px in. */
.pw-toggle-wrap > .pw-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #999;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    text-align: center;
}

.pw-toggle-btn:hover,
.pw-toggle-btn:focus {
    color: #555;
    outline: none;
}