/* ---------------------------------------------------------------------------
   Крестик и микрофон в полях — в админке и на витрине.

   Кнопки лежат поверх правого края поля, а само поле получает отступ,
   чтобы текст под ними не прятался. Обёртка повторяет ширину поля и не
   меняет раскладку страницы: у неё нет ни рамки, ни фона.
   --------------------------------------------------------------------------- */

.af-f {
    position: relative;
    display: block;
    width: 100%;
    /* Поле могло быть растянутым элементом строки — обёртка встаёт на его
       место и должна вести себя так же, иначе шапка и формы разъезжаются.
       Вне флекс-строки эти свойства ничего не значат. */
    flex: 1 1 auto;
    min-width: 0;
}

/* Поле внутри обёртки остаётся собой: ширину и вид задаёт страница. */
.af-f > input,
.af-f > textarea {
    width: 100%;
    padding-right: 30px;
}

/* Поле, которое стоит в строке рядом с другими, обёртка не растягивает:
   иначе крестик и микрофон уезжают к правому краю экрана, а соседние
   кнопки — на строку ниже. Ширину в таком случае задаёт само поле. */
.af-f--inline {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
    flex: 0 0 auto;
}

.af-f--inline > input,
.af-f--inline > textarea { width: auto; max-width: 100%; }

.af-f--voice > input,
.af-f--voice > textarea {
    padding-right: 56px;
}

/* Своим кнопкам приходится защищаться от страницы: и в админке, и на
   витрине есть правила вида «все кнопки в этой строке — чёрный круг».
   Наши кнопки в такую строку попадают случайно и превращались в жирную
   чёрную кляксу поверх поля. Отсюда !important — здесь он не про
   важность, а про то, что эти две кнопки одинаковы всегда и везде. */
.af-f > .af-f__x,
.af-f > .af-f__mic {
    position: absolute;
    top: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none;
    margin: -12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    color: #a8b0b8 !important;
    font-size: 17px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.af-f > .af-f__x { right: 6px; }
.af-f--voice > .af-f__x { right: 30px; }
.af-f > .af-f__mic { right: 5px; }

.af-f > .af-f__x:hover { background: #f1f3f5 !important; color: #b3372c !important; }
.af-f > .af-f__mic:hover { background: #f1f3f5 !important; color: #101418 !important; }
.af-f > .af-f__x[hidden] { display: none !important; }

/* Пока идёт запись — кнопка «дышит»: иначе непонятно, слушает ли она. */
.af-f > .af-f__mic.is-on {
    background: #fdecea !important;
    color: #b3372c !important;
    animation: af-mic 1.1s ease-in-out infinite;
}

@keyframes af-mic {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 55, 44, .32); }
    50% { box-shadow: 0 0 0 5px rgba(179, 55, 44, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .af-f > .af-f__mic.is-on { animation: none; }
}

/* В многострочном поле кнопки прижаты к верхнему краю: строка растёт
   вниз, и кнопка посередине уезжала бы вместе с ней. */
.af-f--area > .af-f__x,
.af-f--area > .af-f__mic {
    top: 8px;
    margin: 0 !important;
}

/* Запасные варианты распознанного. Браузер слышит «гель для Чили» вместо
   «гель для очищения» — поправить одним нажатием быстрее, чем диктовать
   заново. */
.af-f__alt {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #9aa3ad;
}

.af-f__alt-one {
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid #dfe3e9;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: #55606b;
    cursor: pointer;
}

.af-f__alt-one:hover { border-color: #101418; color: #101418; }