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

<Meta title='@dxtmisha/en/# UI/properties/types/Responsiveness (media, container)'/>

# Responsiveness (media, container)

The `media` and `container` structural types manage the generation of adaptive rules (`@media` and `@container`). They enable precise scaling of the interface based on viewport dimensions or parent block constraints.

The system distinguishes four primary responsiveness types, deeply integrated with the design system's breakpoints:
- **media**: Generates a `min-width` condition (from the specified point and above). If two values are passed (e.g., `sm,md`), it generates a range: `(min-width: ...) and (max-width: ...)`.
- **media-max**: Generates a `max-width` condition. The system automatically subtracts `1px` from the breakpoint value to prevent style overlap at the exact boundary.
- **container** / **container-max**: Operate identically to media queries but generate `@container` rules, allowing elements to adapt to their parent container's dimensions. Requires `container-type` to be defined on the parent element.

Adaptive queries can be initialized using the `|` separator shortcut (e.g., `media-max|md`) or explicitly via the `_type` property. The `value` field accepts both design tokens (sm, md, lg) and raw CSS units (768px).

**Input Configuration (`properties.json`):**
```json
{
  "card": {
    "padding": "24px",
    
    "media-max|md": {            // Viewport-based query (media-max)
      "padding": "16px"
    },
    
    "mobile": {                  // Explicit type declaration (explicit)
      "_type": "container-max",  // Parent-based query (container-max)
      "value": "400px",
      "padding": "8px"
    },
    
    "container-max|lg": {        // Container-max shortcut
       "padding": "20px"
    }
  }
}
```

**Conceptual Compiled Output (SCSS):**
```scss
.card {
  padding: 24px;

  @media (max-width: 960px) {    // media-max|md
    padding: 16px;
  }

  @container (max-width: 400px) { // _type: container-max
    padding: 8px;
  }
  
  @container (max-width: 1200px) { // container-max|lg
    padding: 20px;
  }
}
```

### Group Formation (Media Group)

The specialized types `media-group`, `media-max-group`, `container-group`, and `container-max-group` allow for the automatic generation of a set of adaptive rules for all available breakpoints defined in the system.

This eliminates the need to manually write each media query when the adaptation logic is the same for different sizes but must be encapsulated into separate selectors.

**Example Configuration (`properties.json`):**
```json
{
  "button": {
    "group|icon": {
      "_type": "media-group",
      "padding": "8px"
    }
  }
}
```

**Compiled Output (SCSS):**
When using `media-group`, the system creates nested classes for each breakpoint by adding a suffix (e.g., `iconSm`, `iconMd`):
```scss
.button {
  &--iconSm { @media (min-width: 640px) { padding: 8px; } }
  &--iconMd { @media (min-width: 768px) { padding: 8px; } }
  &--iconLg { @media (min-width: 1024px) { padding: 8px; } }
  // and so on for all breakpoints...
}
```
