Часто необходимость подстроить верстку формы авторизации под различные расширения.
Одно из таких расширений 1password, которое добавляет свой значок в поля ввода.
/* Класс компонента с вводом пароля */
.formInputPassword{
}
/* Класс элемента кнопки в поле ввода */
.formInputPassword_button{
right: 10px;
transition: 0.2s; /* Добавляем анимацию, что кнопка при появлении 1password 1password аккуратно смещалась */
}
/* Изменение положения кнопки, при появлении значка 1password */
body:has(> com‑1password‑button) .formInputPassword:focus‑within .formInputPassword_button{
right: calc(10px + 32px);
}