# atQuery

> The raw escape hatch for expressing a container condition directly — querying `height`, `orientation`, a style feature, or combining several with `and`/`or`.

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

The raw escape hatch for expressing a container condition directly —
querying `height`, `orientation`, a style feature, or combining several
with `and`/`or`. `query` is used verbatim as the full `@container` condition.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.atQuery("(min-width: 40rem)", u.p(6))` | `css({ "@container (min-width: 40rem)": { padding: "..." } })` |
| `u.atQuery("sidebar (min-width: 40rem)", u.p(6))` | `css({ "@container sidebar (min-width: 40rem)": { padding: "..." } })` |

## Examples

### Basic example

Use `atQuery(query, ...)` to write the whole `@container` condition yourself, like `atQuery("(min-width: 24rem)", ...)`. 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),
			atQuery("(min-width: 24rem)", 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>
```

### Combining conditions

Combine conditions and name the container in the query, like `atQuery("panel (min-width: 20rem) and (max-width: 36rem)", ...)`, to style a range of widths. The card is tinted only inside it. 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),
			atQuery("panel (min-width: 20rem) and (max-width: 36rem)", bg("brand.tint")),
		]}
	>
		<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 orientation

Declare a size container with `container(name, "size")` to query its height or orientation, like `atQuery("frame (orientation: landscape)", ...)`. Drag the handle at the box's bottom-right corner in any direction:

```tsx
<div
	mix={[
		container("frame", "size"),
		resize("both"),
		overflow(),
		bs(64),
		minIs(48),
		minBs(32),
		...,
	]}
>
	<article
		mix={[
			grid(),
			gap(4),
			atQuery("frame (orientation: landscape)", gridTemplate({ columns: "1fr 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 value

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

```ts
u.atQuery("(min-width: 40rem)", u.p("2.75rem"))
```

## Applying on a state

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

```ts
u.hover(u.atQuery("(min-width: 40rem)", u.p(6)))
```

## Signature

```ts
u.atQuery(query: string, input: UtilityInput<Node>)
```