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

```css
--neeto-ui-dropdown-margin-x: 0px;
--neeto-ui-dropdown-margin-y: 6px;
--neeto-ui-dropdown-padding-x: 0px;
--neeto-ui-dropdown-padding-y: 0px;
--neeto-ui-dropdown-border-width: 1px;
--neeto-ui-dropdown-border-color: rgb(var(--neeto-ui-gray-400));
--neeto-ui-dropdown-border-radius: var(--neeto-ui-rounded);
--neeto-ui-dropdown-box-shadow: var(--neeto-ui-shadow-lg);

// Popup
--neeto-ui-dropdown-popup-width: auto;
--neeto-ui-dropdown-popup-min-width: 168px;
--neeto-ui-dropdown-popup-max-height: 480px;
--neeto-ui-dropdown-popup-bg-color: rgb(var(--neeto-ui-white));
--neeto-ui-dropdown-popup-border-radius: var(--neeto-ui-rounded);
--neeto-ui-dropdown-popup-z-index: 99999;

// Popup Menu
--neeto-ui-dropdown-popup-menu-padding-x: 0px;
--neeto-ui-dropdown-popup-menu-padding-y: 4px;

// Item
--neeto-ui-dropdown-item-padding-y: 6px;
--neeto-ui-dropdown-item-padding-x: 12px;
--neeto-ui-dropdown-item-font-size: var(--neeto-ui-text-sm);
--neeto-ui-dropdown-item-font-weight: var(--neeto-ui-font-normal);
--neeto-ui-dropdown-item-line-height: 1.143;
--neeto-ui-dropdown-item-color: rgb(var(--neeto-ui-gray-800));
--neeto-ui-dropdown-item-bg-color: rgb(var(--neeto-ui-white));
--neeto-ui-dropdown-item-white-space: nowrap;
--neeto-ui-dropdown-item-min-height: 32px;
--neeto-ui-dropdown-item-gap: 8px;
--neeto-ui-dropdown-item-border-radius: 0px;

// Item - Active
--neeto-ui-dropdown-item-active-bg-color: rgb(var(--neeto-ui-primary-500));
--neeto-ui-dropdown-item-active-color: rgb(var(--neeto-ui-white));

// Item - Disabled
--neeto-ui-dropdown-item-disabled-opacity: 0.5;

// Item - Hover
--neeto-ui-dropdown-item-hover-bg-color: rgb(var(--neeto-ui-gray-200));

// Item - Focus
--neeto-ui-dropdown-item-focus-bg-color: rgb(var(--neeto-ui-gray-200));

// Divider
--neeto-ui-dropdown-divider-height: 1px;
--neeto-ui-dropdown-divider-bg-color: rgb(var(--neeto-ui-gray-200));
--neeto-ui-dropdown-divider-margin: 4px;
```

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

```css
.neetix-dropdown {
  --neeto-ui-dropdown-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-dropdown-item-active-bg-color: rgb(var(--neeto-ui-gray-800));
}
```

#### Output
