CSS transform based on condition

[RemyMachado]

I was wondering about what's the best way to achieve a css transform based on a condition with PandaCSS.

Use case:

<ChevronDown
    style={{
      transform: `rotate(${isOpen ? 180 : 0}deg)`,
      transition: 'transform 0.3s',
    }}
/>

With a recipe I believe it would be possible to use a data-open state. However, I'm not a fan of using an html attribute to control the css animation.
On top of that, this component is a simple Svg component in React.js and I'm just planning to declare a className at most (no recipe).

What are your advices?

[astahmer]

it's fine to use style for dynamic styling

<ChevronDown
  style={{ transform: `rotate(${isOpen ? 180 : 0}deg)` }}
  className={css({ transition: "transform 0.3s" })}
/>

[RemyMachado]

Ok, then I guess I'll use PandaCSS' utility token.var() to use css related values (i.e., transition-duration).
Thanks for you prompt reply.