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

```css
// Wrapper
--neeto-ui-input-wrapper-flex-grow: 1;

// Label Wrapper
--neeto-ui-input-label-wrapper-gap: 8px;

// Label
--neeto-ui-input-label-overflow-wrap: break-word;
--neeto-ui-input-label-margin: 8px;

// Max Length
--neeto-ui-input-max-length-font-size: var(--neeto-ui-text-sm);
--neeto-ui-input-max-length-color: rgb(var(--neeto-ui-gray-700));
--neeto-ui-input-max-length-line-height: 1;

// Input
--neeto-ui-input-padding-x: 0px;
--neeto-ui-input-padding-y: 0px;
--neeto-ui-input-min-height: 0px;
--neeto-ui-input-font-size: var(--neeto-ui-text-sm);
--neeto-ui-input-border-width: 1px;
--neeto-ui-input-border-color: rgb(var(--neeto-ui-gray-400));
--neeto-ui-input-border-radius: var(--neeto-ui-rounded);
--neeto-ui-input-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-input-bg-color: rgb(var(--neeto-ui-white));
--neeto-ui-input-line-height: 1.2;

// Textarea
--neeto-ui-textarea-padding-x: 0px;
--neeto-ui-textarea-padding-y: 0px;
--neeto-ui-textarea-line-height: 1.5;
--neeto-ui-textarea-max-height: 224px;

// Placeholder
--neeto-ui-input-placeholder-color: rgb(var(--neeto-ui-gray-400));

// Focus
--neeto-ui-input-focus-outline-color: transparent;

// Hover
--neeto-ui-input-hover-border-color: rgb(var(--neeto-ui-gray-700));

// Focus Within
--neeto-ui-input-focus-within-border-color: rgb(var(--neeto-ui-primary-500));
--neeto-ui-input-focus-within-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-primary-500), 15%);

// Prefix & Suffix
--neeto-ui-input-prefix-suffix-font-size: var(--neeto-ui-text-sm);
--neeto-ui-input-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
--neeto-ui-input-prefix-suffix-bg-color: transparent;
--neeto-ui-input-prefix-suffix-line-height: 1;
--neeto-ui-input-prefix-suffix-icon-size: 16px;
--neeto-ui-input-prefix-suffix-margin: 0px;
--neeto-ui-input-prefix-suffix-padding-x: 0px;
--neeto-ui-input-prefix-suffix-border-width: 0px;
--neeto-ui-input-prefix-suffix-border-color: transparent;

// Help Text
--neeto-ui-input-help-text-margin: 8px;
--neeto-ui-input-help-text-font-size: var(--neeto-ui-text-xs);
--neeto-ui-input-help-text-color: rgb(var(--neeto-ui-gray-700));
--neeto-ui-input-help-text-line-height: 1.1;

// Error Text
--neeto-ui-input-error-text-margin: 8px;
--neeto-ui-input-error-text-font-size: var(--neeto-ui-text-xs);
--neeto-ui-input-error-text-color: rgb(var(--neeto-ui-error-800));
--neeto-ui-input-error-text-line-height: 1.1;
```

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

```css
.neetix-textarea {
  --neeto-ui-input-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-input-focus-within-border-color: rgb(var(--neeto-ui-success-500));
  --neeto-ui-input-focus-within-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-success-500), 15%);
}
```

#### Output
