/* Global password visibility toggle styling.
   Positions the eye icon neatly inside the password field on the right. */

.password-field,
.pwd-wrapper {
    position: relative;
}

/* Auto-generated wrappers use a <span>; make it behave like a block so the
   contained input keeps its full width and the absolutely-positioned icon
   anchors correctly. */
.password-field.has-password-toggle {
    display: block;
}

.password-field.has-password-toggle .form-control,
.password-field.has-password-toggle input,
.pwd-wrapper .form-control,
.pwd-wrapper input {
    padding-right: 42px;
}

.toggle-password {
    position: absolute;
    top: calc(50% + 6px);
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    color: #888;
    font-size: 16px;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 5;
}

.toggle-password:hover,
.toggle-password:focus {
    color: #333;
    outline: none;
}

.toggle-password:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}