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

## Обзор

Стили `Radio` задаются небольшим набором переменных на уровне input: размер, цвет границы и обводка фокуса. Он ближе к нативному input, чем более компонуемые чекбоксы и переключатели.

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--radio-size` | `Radio` | Визуальный размер контрола. |
| `--radio-border-color` | `Radio` | Текущий цвет границы. |
| `--focus-color` | `Radio` | Цвет обводки фокуса. |
| `--transition-state-delay` | `Radio` | Длительность перехода между состояниями. |
| `--radio-border-color-hover` | `Radio` | Цвет рамки при наведении. |
| `--radio-border-color-active` | `Radio` | Цвет рамки при нажатии. |

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

- `Radio`: отвечает за весь внешний вид как один стилизованный нативный input.

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

- `size` соответствует разным токенам отступов.
- `variant` меняет семейство цветов отмеченного состояния.
- Отключённое состояние меняет фон и оформление отметки вместе.

## Примеры

```css
.brandRadio {
  --focus-color: var(--fills-primary);
}
```

```css
.compactRadio {
  --radio-size: 14px;
}
```

## Не переопределяйте

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