/* Show/hide password button (see js/password-toggle.js) */
.password-toggle {
    position: absolute;
    top: 1.1rem;
    right: calc(0.75rem + 4px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9d9d9d;
    cursor: pointer;
    z-index: 2;
    transition: color .3s ease-out, box-shadow .3s ease-out;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: #707070;
}

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

.password-toggle:focus-visible {
    box-shadow: 0 0 0 2px #175fe5;
}

.password-toggle-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
}

.password-toggle .password-toggle-hide,
.password-toggle[aria-pressed="true"] .password-toggle-show {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle-hide {
    display: block;
}

/* keep text from running under the button */
input.js-password-input:not(.browser-default) {
    padding-right: 44px;
    box-sizing: border-box;
}

/* hide the browser's own reveal button (Edge) so there are no two eyes */
input.js-password-input::-ms-reveal {
    display: none;
}

/* Set/Reset password pages: the existing rules are bound to type=password, mirror them for the visible state */
.password-field input.js-password-input:not(.browser-default) {
    padding-right: 76px;
}

.password-field input.js-password-input.invalid + .error-icon {
    display: block;
}

.password-field input.js-password-input:focus ~ .pass-info-block {
    display: block;
}

.password-field .error-icon {
    right: calc(0.75rem + 40px);
}

/* Registration page (.reg-field uses !important styles, input height 56px) */
.reg-field .password-toggle {
    top: 28px;
    right: 12px;
}

.reg-field input.js-password-input {
    padding-right: 52px !important;
}