# detailsContent

> Applies the given utilities to a `<details>` element's `::details-content` pseudo-element, the region holding everything after the `<summary>`.

```ts
import { detailsContent } from "@sdxc/u/state";
```

Applies the given utilities to a `<details>` element's `::details-content`
pseudo-element, the region holding everything after the `<summary>`.
Combine with `u.open()`'s selector to scope styles to the open state.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.detailsContent([u.overflow("clip"), u.bs(0)])` | `css({ "&::details-content": { overflow: "clip", blockSize: "0" } })` |

## Examples

### Basic example

Wrap utilities in `detailsContent()` to style the part of a `<details>` that opens. Click the summary:

```tsx
<details
	mix={[
		detailsContent([borderEdge("inline-start", { color: "brand", width: 2 }), pis(3), mbs(2)]),
		...,
	]}
>
	<summary mix={[cursor("pointer"), weight("semibold")]}>What does it cost?</summary>
	Every package is MIT licensed and free to use.
</details>
```

### Animating open and closed

Collapse the content with `detailsContent()`, size it back to `auto` under `open()`, and let `interpolateSize()` animate between them. Click the summary:

```tsx
<details
	mix={[
		interpolateSize(),
		detailsContent([
			bs(0),
			overflow("clip"),
			transition("block-size, content-visibility", { duration: 300 }),
			transitionBehavior("allow-discrete"),
		]),
		open(detailsContent(bs("auto"))),
		...,
	]}
>
	<summary mix={[cursor("pointer"), weight("semibold")]}>How do releases work?</summary>
	A release runs every day and publishes each package that changed since the last one.
</details>
```

## Using a custom value

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

```ts
u.detailsContent([u.overflow("clip"), u.bs("2.75rem")])
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.detailsContent([u.overflow("clip"), u.bs(0)]))
```

## Signature

```ts
u.detailsContent(input: UtilityInput<Node>)
```