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

```css
--neeto-ui-tag-padding-x: 8px;
--neeto-ui-tag-padding-y: 3px;
--neeto-ui-tag-font-size: var(--neeto-ui-text-xs);
--neeto-ui-tag-font-weight: var(--neeto-ui-font-normal);
--neeto-ui-tag-line-height: 12px;
--neeto-ui-tag-color: rgb(var(--neeto-ui-black));
--neeto-ui-tag-bg-color: transparent;
--neeto-ui-tag-border-width: 1px;
--neeto-ui-tag-border-color: transparent;
--neeto-ui-tag-border-radius: var(--neeto-ui-rounded-full);
--neeto-ui-tag-gap: 4px;
--neeto-ui-tag-icon-size: 12px;

// Indicator
--neeto-ui-tag-indicator-size: 8px;
--neeto-ui-tag-indicator-border-radius: var(--neeto-ui-rounded-full);

// Hover
--neeto-ui-tag-icon-hover-opacity: 0.8;
```

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

```css
.neeto-ui-tag--type-outline.neetix-tag--primary {
  --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-gray-100));
  --neeto-ui-tag-border-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
}
```

#### Output
