---
---

## Группа

«Группа» это набор разных элементов, соединённых в один элемент. Обычно такие элементы располагаются вплотную друг к другу, например, кнопка и тексовое поле ввода.

Базовый тип `group` почти ничего не задаёт кроме запрета переноса для внутренних элементов:

    kind: group

### Элементы группы

Элементы группы можно разделить на три типа: абстрактные `group-item`, а также конкретные `group-start`, `group-middle` и `group-end`.

Абстрактные элементы `group-item`, по сути, являются шорткатами для конкретных, записанных через CSS-селекторы `:first-child` и `:last-child`. Их имеет смысл применять если список элементов однородный и унифицированный:

    kind: group-item

Если же визуальный порядок элементов будет отличаться от их порядка в DOM, лучше применять конкретные обозначения начала, середины и конца группы:

    kind: group-start

    kind: group-middle

    kind: group-end

Элементы группы можно настроить: по умолчанию таким элементам на стыках сбрасываются скругления и элементы сдвигаются внахлёст на один пиксель. Сброс скруглений можно отключить параметром `no-radius`, а нахлёст — `no-margin`.

Кроме того, если визуальное отображение элемента находится внутри айтема, можно переопределить селектор, на котором будут сбрасываться стили на стыках, в этом же селекторе можно сбрасывать стили на нескольких блоках, скажем, на псевдоэлементах:

    kind: group-item '& > .complex-button-inner, & > .complex-button-inner:before'

### Вертикальная группа

По умолчанию группы считаются горизонтальными, и они получают соответствующие обнуления скруглений и маджинов слева и справа. Если нужно получить аналогичный эффект сверху и снизу, достаточно добавить параметр `vertical`:

    kind: group-item vertical

    kind: group-start vertical

    kind: group-middle vertical

    kind: group-end vertical