# floatingSurface

> The border, rounding, tint, and elevation shadow a floating surface — an anchored popover, a hover-revealed card, a multi-item navigation panel, or a searchable command list — carries on its own host element, ahead of whatever placement, motion, and content styling that surface layers on top.

```ts
import { floatingSurface } from "@sdxc/ui/styles";
```

Composes the shared floating-surface border, tint, and elevation shadow as
a `css()` mixin. The shadow keeps a literal fallback shaped like `@sdxc/u`'s
`lg` step, under the `--ui-shadow-md` variable name.

## Signature

```ts
floatingSurface<Node extends Element = Element>(): MixinDescriptor<
	Node,
	[styles: CSSStyles],
	ElementProps
>
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Examples

```tsx
<div
	popover="auto"
	mix={[
		floatingSurface(),
		css({ margin: "0", inset: "auto" }),
	]}
>
	{content}
</div>;
```