/* Контейнер для input[type=password] + кнопка-глаз. Добавляется автоматически
через web/js/password-toggle.js — никаких правок в форме делать не нужно. */
.password-toggle-wrap {
position: relative;
display: block;
}
.password-toggle-wrap > input {
/* Освобождаем место справа под иконку */
padding-right: 40px !important;
}
.password-toggle-btn {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: none;
background: transparent;
color: #6c757d;
cursor: pointer;
border-radius: 4px;
font-size: 18px;
line-height: 1;
transition: color 0.15s ease, background-color 0.15s ease;
}
.password-toggle-btn:hover {
color: #212529;
background-color: rgba(0, 0, 0, 0.04);
}
.password-toggle-btn:focus {
outline: 2px solid rgba(13, 110, 253, 0.4);
outline-offset: 1px;
}
.password-toggle-btn[aria-pressed="true"] {
color: #0d6efd;
}
/* Иконки через CSS-mask на случай если Bootstrap Icons не подключены.
Используем единый SVG-источник для глаз и зачёркнутого глаза. */
.password-toggle-btn .password-toggle-icon {
display: block;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.password-toggle-btn[aria-pressed="false"] .password-toggle-icon {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.password-toggle-btn[aria-pressed="true"] .password-toggle-icon {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}