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

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

# Media

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

**Как это работает:** Система использует значения контрольных точек, специфичных для дизайна, хранящиеся в карте `variables.$designsMedia`. Функция `media()` извлекает значения контрольных точек на основе текущей дизайн-системы. Миксины предоставляют удобные обертки для медиа-запросов и контейнерных запросов, автоматически обрабатывая расчеты min/max ширины и диапазонные запросы.

## Функции

### `media`

Возвращает значение контрольной точки для медиа-запросов.

**Параметры:**
- `$width` — название размера (например, 'sm', 'md', 'lg')

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

```scss
$breakpoint: media('md'); // возвращает значение контрольной точки
```

## Миксины медиа-запросов

### `mediaMinWidth`

Создает медиа-запрос с минимальной шириной контрольной точки.

**Параметры:**
- `$width` — название размера

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

```scss
.element {
  @include mediaMinWidth('md') {
    display: block;
  }
}
```

### `mediaMaxWidth`

Создает медиа-запрос с максимальной шириной контрольной точки.

**Параметры:**
- `$width` — название размера

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

```scss
.element {
  @include mediaMaxWidth('md') {
    display: none;
  }
}
```

### `mediaMinMaxWidth`

Создает медиа-запрос с диапазоном минимальной и максимальной ширины.

**Параметры:**
- `$min` — название минимального размера
- `$max` — название максимального размера

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

```scss
.element {
  @include mediaMinMaxWidth('sm', 'lg') {
    padding: 16px;
  }
}
```

## Миксины контейнерных запросов

### `containerMinWidth`

Создает контейнерный запрос с минимальной шириной контрольной точки.

**Параметры:**
- `$width` — название размера

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

```scss
.element {
  @include containerMinWidth('md') {
    display: grid;
  }
}
```

### `containerMaxWidth`

Создает контейнерный запрос с максимальной шириной контрольной точки.

**Параметры:**
- `$width` — название размера

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

```scss
.element {
  @include containerMaxWidth('md') {
    display: flex;
  }
}
```

### `containerMinMaxWidth`

Создает контейнерный запрос с диапазоном минимальной и максимальной ширины.

**Параметры:**
- `$min` — название минимального размера
- `$max` — название максимального размера

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

```scss
.element {
  @include containerMinMaxWidth('sm', 'lg') {
    gap: 16px;
  }
}
```

