# floatingSurface

> Composes the shared floating-surface edge, tint, and elevation as a mixin.

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

Composes the shared floating-surface edge, tint, and elevation as a mixin.
The edge is a ring shadow in the composite `box-shadow`'s ring slot over a
transparent 1px border, which forced-colors mode still paints as a line.

## Signature

```ts
floatingSurface<Node extends Element = Element>(): UtilityMixin<Node>
```

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

## Examples

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

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/styles` too.

### SHADOW_RING

The hairline ring plus soft lift an elevated surface draws its edge with,
read from the theme's `--ui-shadow-ring`; the fallback is its light value.

#### Signature

```ts
const SHADOW_RING = "var(--ui-shadow-ring, 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04))"
```

### SURFACE_PADDING

The gap between a floating surface's edge and the rounded rows it stacks,
one source for both the padding and the radius derived from it.

#### Signature

```ts
const SURFACE_PADDING = "var(--ui-surface-padding, 0.25rem)"
```