/*
 * Кирпич · отбор по характеристикам.
 *
 * Панель над списком товаров: у каждой числовой характеристики пара
 * полей «от» и «до».
 *
 *     form.filters
 *         .filters__rows
 *             .filters__row
 *                 span.filters__label   Мощность мотора, Вт
 *                 .filters__range
 *                     input.filters__field
 *                     span.filters__dash
 *                     input.filters__field
 *         .filters__actions
 *             button.filters__submit
 *             a.filters__reset
 *
 * Форма методом get, а не скрипт: выбранное уезжает в адрес, по ссылке
 * на отобранное возвращаются и её пересылают. Тем же приёмом сделан
 * поиск.
 *
 * Два поля, а не ползунок: ползунком не набрать точное значение, а
 * покупатель приходит с числом в голове. Границы показываются
 * подсказкой в пустом поле — так они не занимают отдельной строки.
 */
.filters {
    margin: 0 0 var(--title-space);
    padding: var(--gap);
    border-radius: var(--surface-radius);
    background: var(--color-surface);
}

/*
 * Строки в несколько колонок: характеристик бывает под сотню, и
 * столбцом панель заняла бы экран целиком. Ширина колонки задана
 * минимумом, а не числом: на узком экране колонки схлопываются сами.
 */
.filters__rows {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.filters__row {
    display: grid;
    gap: 4px;
}

.filters__label {
    color: var(--color-muted);
    font-size: var(--text-small);
    line-height: var(--line-small);
}

/* Выбранная характеристика помечается: в панели из двадцати строк
   заполненные поля глазами не находятся. */
.filters__row.active .filters__label {
    color: var(--color-accent);
}

.filters__range {
    display: flex;
    align-items: center;
    gap: 6px;
}

/*
 * Поля равной ширины и сжимаемые: «от» и «до» должны выглядеть парой, а
 * не главным и второстепенным. min-width: 0 обязателен — иначе поле
 * внутри flex не сжимается ниже своей стандартной ширины и колонка
 * переполняется.
 */
.filters__field {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--color-muted);
    border-radius: calc(var(--surface-radius) / 2);
    background: var(--color-page);
    color: var(--color-title);
    font: inherit;
    font-size: var(--text-small);
}

.filters__field:focus {
    border-color: var(--color-accent);
    outline: none;
}

.filters__dash {
    flex-shrink: 0;
    color: var(--color-muted);
}

.filters__actions {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-top: var(--gap);
}

.filters__submit {
    padding: 8px 18px;
    border: 0;
    border-radius: calc(var(--surface-radius) / 2);
    background: var(--color-accent);
    color: var(--color-page);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-small);
}

.filters__reset {
    color: var(--color-muted);
    font-size: var(--text-small);
}

/* Пусто после отбора. Стоит на месте списка, поэтому отбивается
   сверху: вплотную к панели это читалось бы как её часть. */
.list-empty {
    margin: var(--title-space) 0;
    color: var(--color-muted);
}