# atMax

> The `max-width` counterpart to at: applies while the nearest container's inline size is at most `size`.

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

The `max-width` counterpart to at: applies while the nearest
container's inline size is at most `size`. Shares at's
named-scale/literal-length resolution and named-container targeting.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.atMax("md", [u.p(2), u.flexCol()])` | `css({ "@container (max-width: 36rem)": { padding: "...", flexDirection: "column" } })` |
| `u.atMax("40rem", "ui-dialog", u.flexCol())` | `css({ "@container ui-dialog (max-width: 40rem)": { flexDirection: "column" } })` |

## Examples

### Basic example

Use `atMax(size, ...)` to apply utilities only while the nearest container is at most that wide, the way a toolbar drops its labels when space runs short. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

```tsx
<div mix={[container("toolbar"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<div mix={[hstack({ gap: 2 })]}>
		<button
			type="button"
			mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
		>
			✎ <span mix={[atMax("sm", hidden())]}>Edit</span>
		</button>
		<button
			type="button"
			mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
		>
			⧉ <span mix={[atMax("sm", hidden())]}>Duplicate</span>
		</button>
		<button
			type="button"
			mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
		>
			⌫ <span mix={[atMax("sm", hidden())]}>Delete</span>
		</button>
	</div>
</div>
```

### Querying a named container

Pass a container name, like `atMax("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),
			gridTemplate({ columns: "10rem 1fr" }),
			atMax("md", "panel", gridTemplate({ columns: "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.atMax("md", [u.p("2.75rem"), u.flexCol()])
```

## Applying on a state

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

```ts
u.hover(u.atMax("md", [u.p(2), u.flexCol()]))
```

## 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
atMax("3xl")
```

## Signature

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