How to add responsive (as per selected device) custom css rule and handle trait value accordingly? Same as the style manager property updates for the component

[FaisalShaikhHA]

I want to add a custom CSS rule for my component on color trait change and update trait value according to the current device selected same as the style manager property updates for the component.

let opts = selectedDevice.get("priority") ? {
                          atRuleType: "media",
                          atRuleParams: `(max-width: ${sd.get("widthMedia")})`,
                      } : {};

editor.Css.setRule(#${cid}.active, { color: color }, opts);
Is there any other way to achieve the same and how can I update trait values on device updates?
I really appreciate any help.