# CSS customization

> Style the dropdown using CSS custom properties.

The plugin scopes all its styles to a set of `--llm-*` custom properties declared on the `.sl-llm-actions` root element. Every property defaults to the equivalent Starlight design token, so the plugin looks native on any theme without extra configuration.

Override any of them in your site’s custom CSS to retheme the plugin without touching internal selectors:

```css
.sl-llm-actions {
  --llm-bg:     var(--my-surface-card);
  --llm-border: var(--my-border-default);
  --llm-shadow: var(--my-shadow-dropdown);
}
```

## Trigger button

| Variable               | Default                              | Controls                  |
| ---------------------- | ------------------------------------ | ------------------------- |
| `--llm-trigger-bg`     | `transparent`                        | Trigger button background |
| `--llm-trigger-border` | `1px solid var(--sl-color-hairline)` | Trigger button border     |

## Dropdown panel

| Variable       | Default                    | Controls             |
| -------------- | -------------------------- | -------------------- |
| `--llm-bg`     | `var(--sl-color-bg-nav)`   | Dropdown background  |
| `--llm-border` | `var(--sl-color-hairline)` | Borders and dividers |
| `--llm-shadow` | `var(--sl-shadow-lg)`      | Dropdown box-shadow  |
| `--llm-radius` | `0.375rem`                 | Border radius        |

## Menu items

| Variable              | Default                  | Controls                   |
| --------------------- | ------------------------ | -------------------------- |
| `--llm-item-hover-bg` | `var(--llm-border)`      | Item background on hover   |
| `--llm-text`          | `var(--sl-color-text)`   | Primary text color         |
| `--llm-text-muted`    | `var(--sl-color-gray-3)` | Secondary/description text |
| `--llm-accent`        | `var(--sl-color-accent)` | Focus ring color           |

## Typography

| Variable        | Default                 | Controls                            |
| --------------- | ----------------------- | ----------------------------------- |
| `--llm-font`    | `var(--sl-font-system)` | Font family                         |
| `--llm-text-sm` | `var(--sl-text-sm)`     | Item label font size                |
| `--llm-text-xs` | `var(--sl-text-xs)`     | Description/section label font size |