> For the complete documentation index, see [llms.txt](https://docs.nickarce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nickarce.com/etch-drawer/customization/custom-css.md).

# Custom CSS

Customize the visual appearance by setting these custom properties on `.c-drawer` or `:root`.

## Custom properties

| Variable                  | Description                          | Default                       |
| ------------------------- | ------------------------------------ | ----------------------------- |
| `--drawer-bg`             | Drawer background color              | `#fff`                        |
| `--drawer-overlay-color`  | Overlay background color             | `rgba(0,0,0,0.4)`             |
| `--drawer-duration`       | Transition duration                  | `0.5s`                        |
| `--drawer-easing`         | Transition easing curve              | `cubic-bezier(0.32,0.72,0,1)` |
| `--drawer-radius`         | Drawer border radius                 | `var(--radius)`               |
| `--drawer-inset`          | Margin from viewport edges           | `8px`                         |
| `--drawer-max-height`     | Maximum height for vertical drawers  | `92dvh`                       |
| `--drawer-max-width`      | Maximum width for horizontal drawers | `24rem`                       |
| `--drawer-body-padding`   | Padding inside `.c-drawer__body`     | `var(--space-m)`              |
| `--drawer-handle-width`   | Drag handle width                    | `48px`                        |
| `--drawer-handle-height`  | Drag handle height                   | `4px`                         |
| `--drawer-handle-color`   | Drag handle color                    | `#b4b4b8`                     |
| `--drawer-handle-padding` | Drag handle wrapper padding          | `1.25rem 0 1rem`              |