WebUI NTP: customize dialog, fix RTL layout of shortcut options images

Bug: 1100301
Change-Id: I6e21dee0a10b359f5b8d3571146f36b62892887f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2284163
Auto-Submit: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#785874}

chrome/browser/resources/new_tab_page/customize_shortcuts.html

@@ -43,7 +43,7 @@
     width: 144px;
   }
 
-  html[dir=rtl] .option-mini {
+  :host-context([dir='rtl']) .option-mini {
     left: 40px;
     right: unset;
   }
@@ -88,7 +88,7 @@
     -webkit-mask-image: url(icons/generic_globe.svg);
   }
 
-  html[dir=rtl] .option-icon {
+  :host-context([dir='rtl']) .option-icon {
     right: 16px;
   }
 
@@ -111,7 +111,7 @@
     width: 22px;
   }
 
-  html[dir=rtl] .option-image .selected-circle {
+  :host-context([dir='rtl']) .option-image .selected-circle {
     left: 0;
     right: 209px;
   }
@@ -122,7 +122,7 @@
     top: 6px;
   }
 
-  html[dir=rtl] .option-image .selected-check {
+  :host-context([dir='rtl']) .option-image .selected-check {
     left: 32px;
     right: initial;
   }
@@ -182,7 +182,7 @@
     width: 22px;
   }
 
-  html[dir=rtl] .selected-circle {
+  :host-context([dir='rtl']) .selected-circle {
     left: auto;
     right: 66px;
   }
@@ -202,7 +202,7 @@
     display: block;
   }
 
-  html[dir=rtl] .selected-check {
+  :host-context([dir='rtl']) .selected-check {
     left: auto;
     right: 63px;
   }