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

```css
// Container
--neeto-ui-toastr-min-width: 320px;
--neeto-ui-toastr-max-width: 640px;
--neeto-ui-toastr-z-index: 100000;

// Styles
--neeto-ui-info-toastr-bg-color: rgb(var(--neeto-ui-info-800));
--neeto-ui-error-toastr-bg-color: rgb(var(--neeto-ui-error-800));
--neeto-ui-success-toastr-bg-color: rgb(var(--neeto-ui-success-800));
--neeto-ui-warning-toastr-bg-color: rgb(var(--neeto-ui-warning-800));

// Toastr
--neeto-ui-toastr-min-height: 48px;
--neeto-ui-toastr-padding-x: 1rem;
--neeto-ui-toastr-padding-y: 0.75rem;
--neeto-ui-toastr-margin-x: 0;
--neeto-ui-toastr-margin-y: 1rem;
--neeto-ui-toastr-box-shadow: none;
--neeto-ui-toastr-border-radius: var(--neeto-ui-rounded-md);
--neeto-ui-toastr-icon-size: 24px;
--neeto-ui-toastr-gap: 12px;
--neeto-ui-toastr-color: rgb(var(--neeto-ui-white));
--neeto-ui-toastr-font-size: var(--neeto-ui-text-sm);
--neeto-ui-toastr-font-weight: var(--neeto-ui-font-normal);

// Close Button
--neeto-ui-toastr-close-btn-color: rgb(var(--neeto-ui-white));
--neeto-ui-toastr-close-btn-margin-y: auto;
--neeto-ui-toastr-close-btn-margin-right: 0px;
--neeto-ui-toastr-close-btn-margin-left: 8px;
```

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

```css
.neetix-toastr {
  --neeto-ui-info-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-error-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-success-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-warning-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
}
```

#### Output
