bug: Invalid @supports syntax in icon.css breaks under strict CSS parsers (e.g. Lightning CSS)

### Current Behavior

icon.css has:

```css
@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])) {
:host(.icon-rtl) .icon-inner {
transform: scaleX(-1);
}
}
```

Per the CSS Conditional Rules spec, `not` and `and` can't be mixed in a `` without explicit parens grouping each operand.

Whilst PostCSS allowed this formatting, Lightning CSS (used in the upcoming stencil v5 release) fails with: `Unexpected token Ident("and")`

### Expected Behavior

```css
@supports (not selector(:dir(rtl))) and (selector(:host-context([dir='rtl']))) {
```

### Steps to Reproduce

```ts
const { transform } = require('lightningcss');
transform({
filename: 'icon.css',
code: Buffer.from(`
@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])) {
a { color: red; }
}
`),
});
// throws: Unexpected token Ident("and")
```

Alternatively, swap in stencil/core `5.0.0-alpha.35` in the main ionic repo and run `npm run build`

### Code Reproduction URL

_No response_

### Additional Information

_No response_

Open icon.css and locate the @supports rule shown in the issue. Update its condition to use the explicit grouping described in Expected Behavior, then run the Lightning CSS reproduction or swap in stencil/core 5.0.0-alpha.35 and run npm run build to confirm the stylesheet parses successfully.

Written by the indexing model from the issue text.