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

```css
// Container
--neeto-ui-avatar-container-border-radius: var(--neeto-ui-rounded);
--neeto-ui-avatar-container-width: 24px;
--neeto-ui-avatar-container-height: 24px;

// Avatar
--neeto-ui-avatar-width: 1.5rem;
--neeto-ui-avatar-height: 1.5rem;
--neeto-ui-avatar-border-radius: var(--neeto-ui-rounded-full);

// Status
--neeto-ui-avatar-status-width: 0.4rem;
--neeto-ui-avatar-status-height: 0.4rem;
--neeto-ui-avatar-status-bg-color: var(--neeto-ui-white);
--neeto-ui-avatar-status-border-width: 0.5px;
--neeto-ui-avatar-status-border-color: rgb(var(--neeto-ui-white));
--neeto-ui-avatar-status-border-radius: var(--neeto-ui-rounded-full);
--neeto-ui-avatar-status-transform: translateX(-40%);
```

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

```css
.neetix-avatar {
  --neeto-ui-avatar-container-border-radius: var(--neeto-ui-rounded-lg);
  --neeto-ui-avatar-border-radius: var(--neeto-ui-rounded-lg);
}
```

#### Output
