Applying custom styling to SelectList component overrides other styling

- `@freenow/wave` version: 1.18.0

### Relevant code

When applying custom styles to the SelectList component using the [styles API from react-select](https://react-select.com/styles#style-object), other styles get overwritten.

For example:

```js
({
...css,
position: 'relative',
...(state.isSelected && {
'::after': {
content: '" (selected)"',
},
}),
}),
}}
label="City"
onChange={change => console.log(change)}
options={[
{
label: 'Barcelona',
value: 'bcn',
},
{
label: 'Hamburg',
value: 'ham',
},
{
label: 'Paris',
value: 'par',
isDisabled: true,
},
]}
/>
```

Produces a select list that looks like this, where the style is overwritten for the pills, disabled state, height of the select list...

Our use case for applying custom styling to the option is that we want to show the "(selected)" text next to the selected ones, to help the user navigate the options. We are currently doing this with JS, but we can simplify the code a lot if custom css was supported here.

### What was expected to happen?

Styles should be merged?

### Reproduction

https://codesandbox.io/s/wave-playground-forked-oq8jpd?file=/src/App.js