# Accordion: Стилизация

## Обзор

Стили `Accordion` распределены между корневым списком, триггером, отступами содержимого и поворотом иконки. Публичный контракт стилизации небольшой и во многом опирается на токены темы и унаследованную типографику.

## Публичные CSS-переменные

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--focus-color` | `AccordionTrigger` | Цвет обводки фокуса. |
| `--spacing-4` | `AccordionContent` | Нижний отступ открытого содержимого. |
| `--spacing-6`, `--spacing-7`, `--spacing-8` | `AccordionTrigger` | Внутренние отступы триггера в зависимости от размера. |
| `--transition-state-delay` | `AccordionIcon` | Длительность поворота при открытии и закрытии. |

## Переменные на уровне частей

- `Accordion`: сбрасывает раскладку и отступы списка.
- `AccordionTrigger`: управляет раскладкой на всю ширину, унаследованной типографикой и кольцом фокуса.
- `AccordionContent`: добавляет отступы в открытом состоянии, а не владеет крупной визуальной поверхностью.
- `AccordionIcon`: поворачивается в открытом состоянии и наследует цвет окружения.

## Взаимодействие состояний и вариантов

- Варианты размера задают разные внутренние отступы триггера.
- Открытое состояние в основном влияет на поворот иконки и отступы содержимого, а не на цвета.
- Богатое содержимое триггера должно сохранять отступы и выравнивание на всю ширину даже при добавлении бейджей или счётчиков.

## Примеры

```css
.compactAccordion {
  --spacing-6: 12px;
  --spacing-7: 14px;
  --spacing-8: 16px;
}
```

```css
.brandAccordion {
  --focus-color: var(--fills-primary);
  --transition-state-delay: 180ms;
}
```

## Что не переопределять

- Не убирайте обводку фокуса триггера без замены.
- Не уменьшайте область нажатия триггера настолько, что кликабельными кажутся только текст или иконка.
- Не делайте поворот иконки единственным сигналом открытого состояния, если подписи и так неоднозначны.