Bug 1643003 - Fix the gradient color direction of the monitor blocks for RTL r=ewright

Differential Revision: https://phabricator.services.mozilla.com/D78085

browser/components/protections/content/protections.css

@@ -261,19 +261,19 @@ a.hidden,
 #protection-settings {
   -moz-context-properties: fill;
   fill: var(--gear-icon-fill);
-  background: url("chrome://global/skin/icons/settings.svg") no-repeat 0px;
+  background: url("chrome://global/skin/icons/settings.svg") no-repeat 0;
   font-size: 0.75em;
   cursor: pointer;
   width: max-content;
   color: var(--in-content-deemphasized-text);
-  margin-block: 6px 0px;
+  margin-block: 6px 0;
   font-size: 12px;
   padding-block: 4px;
   padding-inline: 24px 4px;
 }
 
 #protection-settings:dir(rtl) {
-  background-position-x: right 0px;
+  background-position-x: right;
 }
 
 #protection-settings:hover,
@@ -837,7 +837,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
 
 .monitor-block a {
   color: #FFFFFF;
-  padding: 19px 0px;
+  padding: 19px 0;
 }
 
 .monitor-block a:hover {
@@ -849,16 +849,28 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
   grid-column: 1;
 }
 
+.email:dir(rtl) {
+  background: linear-gradient(197.67deg, #AB71FF 0%, #9059FF 100%);
+}
+
 .breaches {
   background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
   grid-column: 2;
 }
 
+.breaches:dir(rtl) {
+  background: linear-gradient(197.67deg, #9059FF 0%, #7542E5 100%)
+}
+
 .passwords {
   background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
   grid-column: 3;
 }
 
+.passwords:dir(rtl) {
+  background: linear-gradient(197.67deg, #7542E5 0%, #592ACB 100%)
+}
+
 .monitor-stat {
   display: flex;
   font-size: 1.75em;
@@ -979,4 +991,3 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
     opacity: 0.02;
   }
 }
-