# surfaceInset

> Pads a surface around its rounded rows and rounds the surface concentric with them: its radius is the rows' `--ui-radius-md` plus that padding and the surface's edge, so the gap between the curves stays even under any tokens.

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

Pads a surface around its rounded rows and rounds the surface concentric
with them: its radius is the rows' `--ui-radius-md` plus that padding and
the surface's edge, so the gap between the curves stays even under any tokens.

## Signature

```ts
surfaceInset<Node extends Element = Element>(options?: SurfaceInset.Options): UtilityMixin<Node>
```

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

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `SurfaceInset.Options` | How many `--ui-surface-padding` steps the surface pads by. |

## Examples

```tsx
<Popover id="actions" mix={[surfaceInset()]}>{rows}</Popover>;
```

```tsx
<Popover id="products" mix={[surfaceInset({ scale: 2 })]}>{links}</Popover>;
```

## 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)"
```

### SurfaceInset.Options

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `scale?` | `number` | Multiple of `--ui-surface-padding` the surface pads its rows by. Defaults to `1`. |