/* ==================================================
   دکمه‌ی نمایش/پنهان‌کردن رمز عبور
   ساختار را password-toggle.js می‌سازد:
   <span class="pw-field"><input type="password"><button class="pw-toggle"></span>
   ================================================== */

/* توکن‌های تم؛ حالت تیره پیش‌فرض است و حالت روشن بازنویسی می‌شود. */
:root {
    --pw-icon: rgba(255,255,255,.62);
    --pw-icon-dim: rgba(255,255,255,.45);
    --pw-accent: #f2cc72;
    --pw-accent-soft: rgba(242,204,114,.1);
    --pw-autofill-auth: #23262f;
    --pw-autofill-admin: #14161e;
    --pw-autofill-text: #f1f2f4;
    --pw-scheme: dark;
}

:root[data-theme="light"] {
    --pw-icon: rgba(18,33,42,.6);
    --pw-icon-dim: rgba(18,33,42,.45);
    --pw-accent: #8a5a00;
    --pw-accent-soft: rgba(138,90,0,.1);
    --pw-autofill-auth: #ffffff;
    --pw-autofill-admin: #ffffff;
    --pw-autofill-text: #12212a;
    --pw-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --pw-icon: rgba(18,33,42,.6);
        --pw-icon-dim: rgba(18,33,42,.45);
        --pw-accent: #8a5a00;
        --pw-accent-soft: rgba(138,90,0,.1);
        --pw-autofill-auth: #ffffff;
        --pw-autofill-admin: #ffffff;
        --pw-autofill-text: #12212a;
        --pw-scheme: light;
    }
}

.pw-field {
    position: relative;
    display: block;
    width: 100%;
}

/* input[type] تا از .product-field input و .auth-input سنگین‌تر باشد و
   جای دکمه در انتهای فیلد (در RTL یعنی سمت چپ) خالی بماند */
.pw-field input[type] {
    width: 100%;
    padding-inline-end: 2.9rem;
}

.pw-toggle {
    position: absolute;
    inset-inline-end: .45rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--pw-icon);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, background .2s ease;
}

.pw-toggle:hover {
    color: var(--pw-accent);
    background: var(--pw-accent-soft);
}

.pw-toggle:focus-visible {
    outline: 2px solid var(--pw-accent);
    outline-offset: 1px;
    color: var(--pw-accent);
}

.pw-toggle[aria-pressed="true"] {
    color: var(--pw-accent);
}

/* ==================================================
   AUTOFILL — علت نامرئی‌شدن آیکن چشم
   کروم پس‌زمینه‌ی فیلدهای پرشده را روشن (#e8f0fe) می‌کند و آیکنِ روشنِ ما
   با کنتراست ۱.۱۵ عملاً محو می‌شود. این بخش عمداً اینجاست چون
   password-toggle.css تنها فایلی است که در هر سه لایوت لود می‌شود.
   ================================================== */

/* لایه‌ی اول: به کروم بگو این فیلدها تیره‌اند تا خودش رنگ autofill تیره بردارد */
.auth-input,
.product-field input,
.pw-field input[type] {
    color-scheme: var(--pw-scheme);
}

/* لایه‌ی دوم (پشتیبان): background در حالت autofill قابل تغییر نیست،
   پس با یک سایه‌ی داخلیِ پهن پوشانده می‌شود. رنگ هر خانواده جداگانه. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100vmax var(--pw-autofill-auth) inset;
    box-shadow: 0 0 0 100vmax var(--pw-autofill-auth) inset;
}

.product-field input:-webkit-autofill,
.product-field input:-webkit-autofill:hover,
.product-field input:-webkit-autofill:focus,
.product-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100vmax var(--pw-autofill-admin) inset;
    box-shadow: 0 0 0 100vmax var(--pw-autofill-admin) inset;
}

/* متن و مکان‌نما هم باید روشن بمانند، وگرنه تیره روی تیره می‌شود */
.auth-input:-webkit-autofill,
.product-field input:-webkit-autofill {
    -webkit-text-fill-color: var(--pw-autofill-text);
    caret-color: var(--pw-autofill-text);
    /* کروم رنگ پیش‌فرض را با ترنزیشن برمی‌گرداند؛ این عملاً خاموشش می‌کند */
    transition: background-color 600000s 0s;
}

.pw-icon {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

/* آیکن چشمِ خودِ اج/ویندوز حذف شود تا دو تا آیکن کنار هم نیفتد */
.pw-field input[type]::-ms-reveal,
.pw-field input[type]::-ms-clear {
    display: none;
}

/* ناحیه‌ی لمسی بزرگ‌تر روی موبایل */
@media (max-width: 767.98px) {
    .pw-toggle {
        width: 2.4rem;
        height: 2.4rem;
    }

    .pw-field input[type] {
        padding-inline-end: 3.2rem;
    }
}

/* روی دستگاه لمسی، hover نباید حالت رنگی را گیر بیندازد */
@media (hover: none) {
    .pw-toggle:hover {
        color: var(--pw-icon-dim);
        background: transparent;
    }

    .pw-toggle[aria-pressed="true"]:hover {
        color: var(--pw-accent);
    }
}