States

A state is a selector derived from a class — .card:hover — styled with the same controls
as the class itself. There is no separate "hover panel": you're editing a second selector.

The bottom half of the menu is where states live. One click on &:hover, &:active,
&:focus, &:focus-within or &:focus-visible creates that state selector and
opens it for editing.

The & stands for the class itself, so &:hover on .demo-card is .demo-card:hover —
a real CSS rule, styled with the same visual controls as anything else. There's no
separate "hover panel": you're editing a second selector, and Oxygen shows you which one
by splitting the chip into the class plus the highlighted state.

To write a suffix of your own rather than pick a state from the list, see
Nested Selectors.