Update _TopUnreadMessagesBar.pcss by introducing CSS custom properties

[luixxiul]

Your use case

What would you like to do?

Introduce CSS custom properties to _TopUnreadMessagesBar.pcss.

Why would you like to do it?

To semantically organize the selectors and their declarations. Currently all of the declarations are simply on the same level, and it can be updated to make it easier to see how they are related by introducing CSS custom properties, separating the structural definitions and their values. Introducing the custom properties should also make it possible to access and manipulate those values with TypeScript.

How would you like to achieve it?

Add a common structure of the declarations, introduce CSS custom properties, making it easy to customize the style with TypeScript.

Have you considered any alternatives?

No response

Additional context

No response

[luixxiul]

Won't happen.