layout

inset

Applies a logical inset shorthand from the spacing scale or a raw CSS length.

import { inset } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.inset(4)`	`css({ inset: "calc(var(--ui-spacing, 0.25rem) * 4)" })`
`u.inset(0, "auto")`	`css({ insetBlock: "0", insetInline: "auto" })`
`u.inset(1, 2, 3, 4)`	`css({ insetBlockStart: "...", insetInlineEnd: "...", insetBlockEnd: "...", insetInlineStart: "..." })`

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

u.inset("2.75rem")

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

u.hover(u.inset(4))

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

u.at("md", u.inset(4))

The custom properties this utility reads, which a theme redefines.

Variable
`--ui-spacing`

u.inset(...values: SpacingValue[])