# surfacePadding

> The padding surfaceInset applies for a given number of `--ui-surface-padding` steps, for a part that pads along one axis only.

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

The padding surfaceInset applies for a given number of
`--ui-surface-padding` steps, for a part that pads along one axis only.

## Signature

```ts
surfacePadding(scale: number): string
```

Returns: A CSS length.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `scale` | `number` | Multiple of `--ui-surface-padding`. |

## Examples

```tsx
surfacePadding(1) // "var(--ui-surface-padding, 0.25rem)"
```

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