Refactor Claro's messages stylesheet

.messages a {
  text-decoration: underline;
  color: var(--messages__link-color);
}

.messages a:hover {
  color: var(--messages__link--hover-color);
}

.messages pre {
  margin: 0;
}

think more nesting could be done here.

Addressed #8, make few more changes. Attached patch, interdiff and after patch screenshot. please review

After patch

Nesting seems good now

+++ b/core/themes/claro/css/components/messages.pcss.css
@@ -65,63 +75,37 @@
+  @nest .messages--error & {
...
+  @nest .messages--status & {
...
+  @nest .messages--warning & {
...
+  @nest [dir="rtl"] & {

This would probably be easier to read if we combined these with the similar selectors few lines above to something like this:

.messages--error {
  .messages__header {
  }
}

Addressed #11, attached patch and interdiff for same. please review

Here's a few screenshots but appears everything is still functional

The last submitted patch, 12: 3332419-12.patch, failed testing. View results →

Works fine for RTL, keeping @nest is ok. As explained by mherchel, there will be an automated way to move to the new syntax.

Committed 7cb4919 and pushed to 10.1.x. Thanks!

Updating status. Still showing RTBC.

Automatically closed - issue fixed for 2 weeks with no activity.