/*
 * Кирпич · поиск.
 *
 * Поле в строке меню и на странице поиска. Вид выбирает владелец сайта:
 * поле сразу зовёт им воспользоваться, значок бережёт место в строке.
 *
 *     form.search.search--field
 *         label.search__field
 *             span.search__icon
 *             input[type=search]
 *
 *     form.search.search--icon
 *         button.search__button
 *
 * Форма, а не поле со скриптом: без скрипта запрос всё равно уходит и
 * страница поиска открывается. Метод get, потому что запрос обязан
 * остаться в адресе — по ссылке на выдачу возвращаются и её пересылают.
 */
.search {
    display: flex;
    margin: 0;
    align-items: center;
}

/*
 * Поле со значком внутри. Значок лежит в label поверх поля, а не перед
 * ним: так он не отнимает у поля ширину и не сдвигает набранный текст.
 */
.search__field {
    position: relative;
    display: flex;
    align-items: center;
}

.search__icon {
    position: absolute;
    left: 10px;
    display: flex;
    /* Значок служебный: он подсказывает назначение поля, а нажимают на
       само поле. */
    pointer-events: none;
    color: var(--color-muted);
}

.search__icon svg {
    width: 16px;
    height: 16px;
}

.search input {
    box-sizing: border-box;
    /* Место слева под значок, справа под крестик очистки, который
       браузер рисует сам. */
    padding: 0 var(--field-space) 0 32px;
    border: var(--hairline) solid var(--separator);
    border-radius: var(--button-radius);
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font);
    font-size: var(--menu-text);
}

.search input::placeholder {
    color: var(--color-muted);
}

/* Обводка браузера заменяется своей: она должна совпадать с рамкой поля
   по форме, иначе на скруглении появляется вторая геометрия. */
.search input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/*
 * Поле в строке меню. Короткое: рядом стоят разделы и аватарка, и во всю
 * ширину оно вытеснило бы их за край.
 */
.search--field input {
    width: 160px;
    height: 32px;
    line-height: 32px;
}

/*
 * Значок вместо поля: кнопка ведёт на страницу поиска, где набирать
 * запрос есть где. Размер и краска те же, что у пунктов меню, чтобы он
 * стоял с ними в одном ряду, а не выпадал кнопкой.
 */
.search__button {
    display: flex;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text);
    cursor: pointer;
    align-items: center;
}

.search__button svg {
    width: 18px;
    height: 18px;
}

.search__button:hover {
    color: var(--color-muted);
}

/*
 * У поля запасная кнопка скрыта: поле уже стоит в строке, и вторая
 * кнопка рядом вела бы туда же, куда и оно. Правило стоит здесь, до
 * медиазапросов, а не после: у обоих одинаковый вес, и правило ниже по
 * файлу перебивало бы запрос независимо от ширины экрана.
 */
.search--field .search__button {
    display: none;
}

/*
 * Поле на странице поиска: во всю строку, крупнее менюшного. Сюда
 * приходят значком из меню, где набирать было негде, поэтому поле здесь
 * главное на странице, а не приписка к ней.
 */
.search--page {
    margin-bottom: var(--gap);
}

.search--page .search__field {
    width: 100%;
}

.search--page input {
    width: 100%;
    height: var(--button-height);
    font-size: var(--text);
    line-height: var(--button-height);
}

/*
 * Узкий экран: поле в меню сжимается до значка.
 *
 * Рядом стоят название сайта и аватарка, и полю в сто шестьдесят
 * пикселей места уже нет. Убирать поиск совсем нельзя: на телефоне он
 * нужнее, чем на широком экране, где всё меню и так на виду. Поэтому
 * поле прячется, а на его месте остаётся значок, ведущий на страницу
 * поиска, — тот же вид, что владелец мог выбрать и сам.
 */
@media (max-width: 899px) {
    .search--field .search__field {
        display: none;
    }

    /* Запасная кнопка стоит в разметке всегда и до сих пор была скрыта:
       так вид меняется одной строкой, без подмены поля на кнопку
       скриптом и без второй формы в разметке. */
    .search--field .search__button {
        display: flex;
    }
}

/*
 * Ниже 640 ядро прячет пункты меню, кроме свёртки: строка отдана
 * названию сайта и аватарке, а разделы уезжают в полосу внизу
 * страницы. Поиск это правило переживает намеренно — полосы у него нет,
 * и вместе с пунктами он пропал бы с телефона совсем, хотя нужен там
 * больше, чем на широком экране. Место занимает один значок.
 */
@media (max-width: 640px) {
    .menu li.menu__search {
        display: flex;
    }
}