/* ПОКАЗАТЬ ПАРОЛЬ — ОФОРМЛЕНИЕ ОБЩЕЙ КНОПКИ.
 *
 * ═══ ГРАНИЦА ОТВЕТСТВЕННОСТИ ═══
 *
 * Здесь живёт ТОЛЬКО кнопка: её место, размер, значки и состояния. Место под неё справа
 * от текста отводит СВОЙ стиль каждой поверхности — там, где объявлены отступы самого
 * поля. Причина не в аккуратности, а в устройстве проекта: у формы входа отступы поля
 * записаны через !important и селектором из шести классов, и перебить их отсюда можно
 * было бы только гонкой специфичности. Побеждать в такой гонке — значит завести её.
 *
 * Что поверхность обязана сделать у себя: padding-right под кнопку. Это проверяется
 * договором (tests/Unit/PasswordEyeContractTest.php), поэтому забыть молча не выйдет.
 *
 * ═══ ЦВЕТ БЕЗ ТОКЕНОВ ═══
 *
 * Кнопка живёт и на тёмном входе, и в светлой админке. Свой цвет она не выбирает: берёт
 * currentColor поля и приглушается прозрачностью. Так она читается на любом фоне и не
 * зависит ни от одного набора токенов — а наборов в проекте несколько, и они разные.
 */
.dc-pwf{position:relative;display:block;min-width:0}
/* Обёртка не имеет права менять ширину поля. Замерено: в админке ярлык .acc-field —
   сетка, и поле в ней растягивалось само; внутри обёртки растягивать стало нечему, поле
   осталось 236 точек в блоке шириной 330, а кнопка встала по правому краю ОБЁРТКИ — то
   есть в стороне от поля. */
.dc-pwf > input{width:100%;box-sizing:border-box}

/* ═══ КНОПКА ПОВТОРЯЕТ ВЫСОТУ СВОЕГО ПОЛЯ, А НЕ ЗАДАЁТ СВОЮ ═══
 *
 * Поля пароля в проекте разной высоты: 34 в админке, 38 на входе, 45 в каналах. Квадрат
 * заданного размера то торчал бы за границы поля, то болтался бы в нём. Растяжка сверху
 * донизу решает это сразу для всех поверхностей и для тех, что появятся.
 *
 * !important И ЛИШНИЙ КЛАСС В СЕЛЕКТОРЕ — не украшение. В пользовательском режиме есть
 * общее правило `body.user-mode button{min-height:44px!important;border-radius:14px!important}`,
 * и без перевеса кнопка получала 44 точки высоты в поле высотой 38 — замерено. Селектор
 * `.dc-pwf > .dc-pweye` тяжелее `body.user-mode button` ровно на один класс: это минимум,
 * которого хватает, а не запас на всякий случай. */
.dc-pwf > button.dc-pweye,
.dc-pwf > .dc-pweye{
  -webkit-appearance:none;appearance:none;
  /* ПО ЦЕНТРУ ПОЛЯ, А НЕ ОТ ЕГО ВЕРХА. Высоту кнопки на форме входа навязать не выходит:
     чужое правило с !important держит 44 точки в поле высотой 38, и кнопка, поставленная
     от верха, свисала на 6 точек вниз — замерено. Смещение на половину собственной высоты
     центрирует её при ЛЮБОЙ высоте, чьей бы она ни оказалась. */
  position:absolute;right:0;top:50%;transform:translateY(-50%)!important;
  /* ВЫСОТА ЗАДАНА ЯВНО, ДОЛЕЙ ОТ ОБЁРТКИ. Растяжка через top+bottom при height:auto здесь
     не работает: общее правило кнопок объявляет `height:var(--btn-h)`, и рядом с ним
     собственная высота кнопки перестаёт вычисляться от полей — замерено, выходил ноль.
     Доля от обёртки однозначна: обёртка равна полю, значит и кнопка равна полю. */
  /* МИНИМУМЫ СНИМАЮТСЯ ЯВНО. Замерено на живом входе: общее правило кнопок формы задаёт
     min-width:112px, и кнопка растягивалась на треть поля — прозрачная, невидимая, но
     перехватывающая нажатия там, где человек метит в текст. Ширина без снятия минимума
     не действует вовсе. */
  width:44px!important;min-width:0!important;max-width:none!important;
  /* Высоту берём от поля. Там, где перебить чужой !important не выходит, кнопка остаётся
     44 точки — это стандартная цель под палец, и она не мешает: фон прозрачен, а по
     ширине текст уже отделён отступом. */
  height:100%!important;min-height:0!important;max-height:none!important;
  /* ОТСТУП СНИМАЕТСЯ НАСИЛЬНО. Замерено: на форме входа кнопка получала внешний отступ
     18px сверху — правило писалось под кнопку отправки, а достаётся любой кнопке формы,
     и глаз уезжал ниже поля. Своих отступов у кнопки внутри поля быть не может вовсе. */
  margin:0!important;padding:0!important;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:10px!important;background:transparent;
  color:inherit;opacity:.55;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .15s ease}
/* У правила значка НЕТ display: оно тяжелее правила скрытия ниже и погасило бы его —
   замерено, на кнопке были видны сразу оба значка. Видимостью распоряжается только
   состояние aria-pressed. */
.dc-pwf > .dc-pweye svg{width:19px;height:19px;fill:currentColor;pointer-events:none}
.dc-pwf > .dc-pweye:hover{opacity:.9}
.dc-pwf > .dc-pweye:focus-visible{outline:2px solid currentColor;outline-offset:-3px;opacity:1}
/* Открытый глаз — «сейчас скрыто, нажми чтобы увидеть». Перечёркнутый — «сейчас видно».
   Та же семантика, что была у глаза в кабинете профиля: заводить вторую нельзя. */
.dc-pwf > .dc-pweye .dc-pweye__off{display:none}
.dc-pwf > .dc-pweye .dc-pweye__on{display:block}
.dc-pwf > .dc-pweye[aria-pressed="true"]{opacity:1}
.dc-pwf > .dc-pweye[aria-pressed="true"] .dc-pweye__on{display:none}
.dc-pwf > .dc-pweye[aria-pressed="true"] .dc-pweye__off{display:block}