/* ==========================================================================
   lotusPasswordRevealV1.0.0.0.css  (Lotus.Framework — source of truth)

   ظاهر دکمهٔ «نمایش رمز». قاب و دکمه را lotusPasswordRevealV1.0.0.0.js در زمان
   اجرا می‌سازد؛ اینجا فقط استایل است و هیچ قالبی چیزی اضافه نمی‌کند.

   رنگ‌ها از توکن‌های تم می‌آیند، پس با تغییر بیمه خودبه‌خود عوض می‌شوند.

   ترتیب لود: بعد از CSS پایهٔ اپلیکیشن (تا padding فیلد بر .form-control غالب
   شود) و بعد از lotusPalettes (تا توکن‌ها در دسترس باشند).
   ========================================================================== */

.lotus-pwd {
    position: relative;
    display: block;
}

/* داخل .input-group قاب باید مثل یک آیتم گروه کش بیاید، نه بلوک تمام‌عرض */
.lotus-pwd--group {
    display: flex;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.lotus-pwd--group > input {
    width: 100%;
}

/* جای دکمه در سمت چپ باز می‌شود — همان سمتی که صفحهٔ ورود انتخاب کرده.
   فیلدهای رمز اغلب .ltrField‌اند (direction: ltr)، پس متن از چپ شروع می‌شود و
   بدون این padding زیر دکمه می‌رفت. */
.lotus-pwd > input {
    padding-left: 2.6rem;
}

.lotus-pwd > input.form-control-sm {
    padding-left: 2.1rem;
}

.lotus-pwd__btn {
    position: absolute;
    left: .25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    line-height: 1;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}

.lotus-pwd__btn .bi {
    font-size: 1.15rem;
    line-height: 1;
}

.lotus-pwd__btn:hover,
.lotus-pwd__btn:focus {
    color: var(--lotus-bs-primary, #1e4361);
    background-color: var(--lotus-bs-primary-soft, #eef4fb);
    outline: 0;
}

/* رمز آشکار است — دکمه همان رنگ تم را می‌گیرد تا حالت روشن دیده شود */
.lotus-pwd__btn[aria-pressed="true"] {
    color: var(--lotus-bs-primary, #1e4361);
}

.lotus-pwd > input:disabled + .lotus-pwd__btn,
.lotus-pwd > input[readonly] + .lotus-pwd__btn {
    display: none;
}

/* مرورگرهای مبتنی بر Chromium و Edge چشم/کلید داخلی خودشان را نشان می‌دهند و
   کنار دکمهٔ ما دو آیکن هم‌معنی می‌شود. */
.lotus-pwd > input::-ms-reveal,
.lotus-pwd > input::-ms-clear {
    display: none;
}