CSS has unnecessary duplicated rules with RTL selector

CSS has unnecessary duplicated rules with RTL selector.

Hello everyone,
There seem to be an issue with RTL css.
I'm looking at the file admin.toolbar.css in version 3.1.0
The RTL rules are mostly exactly the same rules as without the the RTL selector and they are just causing stronger rules overrides:
For example:

.toolbar-tray-horizontal .menu-item--expanded {
  background-color: #f5f5f2;
}

[dir="rtl"] .toolbar-tray-horizontal .menu-item--expanded {
  background-color: #f5f5f2;
}

The language direction is normally irrelevant to the background color of a menu-item and the direction selector makes it stronger than other custom or contrib css that use the .toolbar-tray-horizontal .menu-item--expanded selector.
So everything might look well in LTR but when switching to RTL we suddenly see these stronger rule overrides.
And to overcome this custom and conrib css also neet to duplicate their code to achieve a stronger selector.

The example above is just a simple example, In Gin these duplicated rules broke the whole hover functionality in RTL (while in LTR is was working well).

Proposed resolution

Use RTL selector only on directional style rules.
From a fast look around it seems like all the selectors with RTL can be removed and we just need to add these two rules to keep the css file essentially the same:

[dir="rtl"] .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded {
  background-position: center left;
  background-image: url(../misc/icons/0074bd/chevron-left.svg);
}
[dir="rtl"] .toolbar-tray-horizontal ul li.menu-item--expanded .menu-item.hover-intent ul {
  margin: -40px 197px 0 0;
}