/* ==========================================================================
   密码明文/密文切换（小眼睛图标）共通样式
   用法：任意 input[type=password] 会被 Common.js 的共通处理自动包一层
         .pwd-eye-wrap 并追加眼睛图标（.pwd-eye-toggle），无需在各页面手写。
   ========================================================================== */

.pwd-eye-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* 为眼睛图标预留输入文字的右侧空间（type 会在 password/text 间切换，
   因此用共通容器内稳定的类名 .pwd-eye-input 来命中） */
.pwd-eye-wrap > input.pwd-eye-input {
    padding-right: 2.4em;
}

/* 眼睛图标（依赖 FontAwesome4/6 的 fa/far 系列图标） */
.pwd-eye-wrap > .pwd-eye-toggle {
    position: absolute;
    top: 50%;
    right: 1.7em;
    transform: translateY(-50%);
    z-index: 5;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: #8a94a6;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pwd-eye-wrap > .pwd-eye-toggle:hover {
    color: #4a6cf7;
}

/* 包一层后 invalid-feedback 仍在输入框下方同行父级内，校验提示样式不受影响 */
.pwd-eye-wrap > .invalid-feedback {
    margin-top: .25rem;
}