Starting from v6, neeto-ui supports enhanced customization of components using
CSS variables. These are the variables that are being used in the `Pane`
component.

```css
--neeto-ui-pane-spacing: 24px;

// Backdrop
--neeto-ui-pane-backdrop-z-index: var(--neeto-ui-modal-z-index);
--neeto-ui-pane-backdrop-bg-color: #1b1f23dd;
--neeto-ui-pane-backdrop-backdrop-filter: blur(2px);

// Wrapper
--neeto-ui-pane-wrapper-width: auto;
--neeto-ui-pane-wrapper-max-width: 100%;
--neeto-ui-pane-wrapper-height: auto;
--neeto-ui-pane-wrapper-bg-color: rgb(var(--neeto-ui-white));
--neeto-ui-pane-wrapper-backdrop-filter: blur(2px);

// Close Button
--neeto-ui-pane-close-btn-top: var(--neeto-ui-pane-spacing);
--neeto-ui-pane-close-btn-right: var(--neeto-ui-pane-spacing);

// Header
--neeto-ui-pane-header-padding-y: var(--neeto-ui-pane-spacing);
--neeto-ui-pane-header-padding-right: 64px;
--neeto-ui-pane-header-padding-left: var(--neeto-ui-pane-spacing);

// Body
--neeto-ui-pane-body-padding-x: var(--neeto-ui-pane-spacing);
--neeto-ui-pane-body-padding-y: 0px;
--neeto-ui-pane-body-height: calc(100vh - var(--neeto-ui-pane-header-height));
--neeto-ui-pane-body-font-size: var(--neeto-ui-text-sm);

// Footer
--neeto-ui-pane-footer-padding: var(--neeto-ui-pane-spacing);
--neeto-ui-pane-footer-bg-color: rgb(var(--neeto-ui-white));
--neeto-ui-pane-footer-min-height: var(--neeto-ui-pane-footer-height);
--neeto-ui-pane-footer-box-shadow: var(--neeto-ui-shadow-m);
```

You can use these variables to customize the component to your liking. Here is
an example:

```css
.neetix-pane {
  --neeto-ui-pane-wrapper-bg-color: rgb(var(--neeto-ui-gray-100));
}
```

#### Output
