import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/styles/ru/Selector'/>

# Selector

Набор SCSS миксинов для управления селекторами состояний элементов с поддержкой CSS Custom Properties.

**Как это работает:** Система обеспечивает интеллектуальное управление состояниями интерактивных элементов. Миксин `enabled` автоматически добавляет селекторы `:not()` для исключения состояний disabled, readonly и loading. Миксины состояний, такие как `hover`, `active` и `focus`, оборачивают `enabled`, гарантируя работу взаимодействий только на активных элементах. Особая обработка для `focus` включает `:focus`, `:focus-within` и BEM-модификатор для программных состояний фокуса.

## Базовые миксины

### `selector`

Создает псевдокласс селектор с особой обработкой состояния focus.

**Параметры:**
- `$name` — имя селектора (например, 'hover', 'active', 'focus')
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.button {
  @include selector('hover') {
    background: blue;
  }
}
```

### `enabled`

Применяет стили только к включенным (не disabled, не readonly, не loading) элементам.

**Параметры:**
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.button {
  @include enabled {
    cursor: pointer;
  }
}
```

### `enabledSelector`

Комбинирует состояние enabled с псевдоклассом селектора.

**Параметры:**
- `$name` — имя селектора
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.button {
  @include enabledSelector('hover') {
    background: blue;
  }
}
```

## Миксины состояний

### `hover`

Применяет стили при наведении только для активных элементов.

**Параметры:**
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.button {
  @include hover {
    background: blue;
  }
}
```

### `active`

Применяет стили при активном состоянии только для активных элементов.

**Параметры:**
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.button {
  @include active {
    transform: scale(0.95);
  }
}
```

### `focus`

Применяет стили при фокусе только для активных элементов. Включает :focus, :focus-within и BEM-модификатор.

**Параметры:**
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.button {
  @include focus {
    outline: 2px solid blue;
  }
}
```

### `disabled`

Применяет стили к отключенным элементам.

**Параметры:**
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.button {
  @include disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
```

### `readonly`

Применяет стили к элементам только для чтения.

**Параметры:**
- `$parent: &` — родительский селектор

**Возвращает:** `void`

```scss
.input {
  @include readonly {
    background: #f5f5f5;
  }
}
```

