# at

> `size` compares against the nearest ancestor with `container-type` set.

```ts
import { at } from "@sdxc/u/responsive";
```

`size` compares against the nearest ancestor with `container-type` set.
A named step resolves here to a literal length, since at-rule
conditions evaluate before custom properties resolve.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.at("md", [u.p(6), u.hstack({ gap: 4 })])` | `css({ "@container (min-width: 36rem)": { padding: "...", display: "flex" } })` |
| `u.at("md", "sidebar", u.p(6))` | `css({ "@container sidebar (min-width: 36rem)": { padding: "..." } })` |

## Examples

### Basic example

Use `at(size, ...)` to apply utilities only when the nearest container is at least that wide, from the container scale (`xs`, `sm`, `md`…). The box is a container declared with `container()`. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

```tsx
<div mix={[container("card"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article mix={[grid(), gap(4), at("sm", gridTemplate({ columns: "10rem 1fr" }))]}>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>
```

### Querying a named container

Pass a container name, like `at("md", "panel", ...)`, to query that ancestor instead of the nearest container. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

```tsx
<div mix={[container("panel"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article mix={[grid(), gap(4), at("md", "panel", gridTemplate({ columns: "14rem 1fr" }))]}>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>
```

### Using a custom length

Pass any length, like `at("30rem", ...)`, for a breakpoint off the container scale. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

```tsx
<div mix={[container("card"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article mix={[grid(), gap(4), at("30rem", gridTemplate({ columns: "1fr 2fr" }))]}>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.at("md", [u.p("2.75rem"), u.hstack({ gap: 4 })])
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.at("md", [u.p(6), u.hstack({ gap: 4 })]))
```

## Customizing your theme

### Customizing container sizes

Redefine a `--ui-container-*` variable to move a breakpoint, or declare a new one:

```css
:root {
	--ui-container-3xl: 96rem;
}
```

```ts
declare module "@sdxc/u" {
	interface Containers {
		"3xl": true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
at("3xl", p(8))
```

## Signature

```ts
u.at(size: ContainerName | (string & {}), input: UtilityInput<Node>)
```