@import '@alfalab/core-components-vars/src/index.css';

/*
* Задача:
* 1) Отобразить символ валюты сразу за последним введенным символом
* 2) Не дать возможность попасть кареткой за валюту
* 3) Не дать выделить символ валюты при выделении денежного значения
* 4) Отображать символ валюты другим цветом
* 5) Отображать копейки другим цветом
*
* Решение
* Делаем скрытый текст где держим то же значение, добавляем символ валюты
* Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
*/

.container {
    position: relative;

    &.filled .input.input {
        -webkit-text-fill-color: transparent;
    }

    /*
     * Когда пользователь выделяет текст, показываем реальный текст инпута
     * и скрываем визуальный суффикс, чтобы избежать артефактов рендеринга (Windows).
     */
    &.focused .input.input {
        -webkit-text-fill-color: currentColor;
    }
}

/* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */
.suffixContainer > *:first-child {
    display: none;
}

.input:focus {
    -webkit-text-fill-color: transparent;
}

.focused .suffixMajor,
.focused .suffixMinor {
    opacity: 0;
}