CSS Variables
Custom variables to style elements inside the component.
These variables can be declared in the stylesheet and imported in page, an example is shown in the homepage.
| Variable Name | Description |
|---|---|
| --search-hover-outline-color | Color of search input outline when hovered over |
| --search-active-outline-color | Color of search input outline when it has focus |
| --search-border-color | Color of search input outline |
| --search-text-color | Color of search input text and placeholder |
| --search-bg-color | Color of search input background |
| --search-border-radius | Border radius of search input |
| --options-container-background-color | Background color of listbox |
| --options-background-color | Background color of each individual option |
| --options-bx-shadow-color | Box shadow color of each individual option |
| --options-text-color | Text color od each individual option |
| --options-highlight-color | Color of background when an option is hovered over |
| --options-active-color | Color of background when an option is selected |
| --chevron-color | Color of chevron (up/down arrow) |
| --clear-icon-color | Color of the clear icon |
| --animation-duration | animation duration for listbox opening and closing |
| --options-max-height | Max height of the listbox |
| --font-weight | Font weight of text inside the combobox |
| --font-size | Font size of text inside the combobox |