Remove the remaining dir-dependent CSS rules

After the recent round of patches, I figured that we'd gone as far as possible in replacing `dir`-dependent CSS rules for the viewer.
However, it occurred that me that we could actually use a bit of CSS-trickery to get rid of the remaining ones. More specifically, this was done by defining a CSS variable whose value depends on the document direction and then using that variable together with `calc()` in the affected rules.

*Please note:* I suppose that this could perhaps be seen as a bit too "magical", hence I understand if this patch is ultimately rejected, however this is probably the only simple way to get rid of the remaining `dir`-dependent CSS rules.

Author: Snuffleupagus

web/viewer.css

@@ -16,6 +16,7 @@
 @import url(pdf_viewer.css);
 
 :root {
+  --dir-factor: 1;
   --sidebar-width: 200px;
   --sidebar-transition-duration: 200ms;
   --sidebar-transition-timing-function: ease;
@@ -104,6 +105,10 @@
   --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
 }
 
+:root:dir(rtl) {
+  --dir-factor: -1;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --main-color: rgba(249, 249, 250, 1);
@@ -287,14 +292,13 @@ html[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
   position: absolute;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25);
 }
 html[dir="ltr"] #sidebarContent {
   left: 0;
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
 }
 html[dir="rtl"] #sidebarContent {
   right: 0;
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
 }
 
 #viewerContainer {
@@ -345,14 +349,8 @@ html[dir="rtl"]
   width: 100%;
   height: 32px;
   background-color: var(--sidebar-toolbar-bg-color);
-}
-html[dir="ltr"] #toolbarSidebar {
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
-    0 0 1px rgba(0, 0, 0, 0.1);
-}
-html[dir="rtl"] #toolbarSidebar {
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
-    0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25),
+    0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 #toolbarSidebar .toolbarButton {
@@ -572,10 +570,7 @@ html[dir="rtl"] #findInput {
 #findInput[data-status="pending"] {
   background-image: var(--loading-icon);
   background-repeat: no-repeat;
-  background-position: 98%;
-}
-html[dir="rtl"] #findInput[data-status="pending"] {
-  background-position: 3px;
+  background-position: calc(50% + 48% * var(--dir-factor));
 }
 #findInput[data-status="notFound"] {
   background-color: rgba(255, 102, 102, 1);
@@ -923,16 +918,12 @@ html[dir="rtl"] .secondaryToolbarButton::before {
 
 .toolbarButton#sidebarToggle::before {
   mask-image: var(--toolbarButton-sidebarToggle-icon);
-}
-html[dir="rtl"] .toolbarButton#sidebarToggle::before {
-  transform: scaleX(-1);
+  transform: scaleX(var(--dir-factor));
 }
 
 .toolbarButton#secondaryToolbarToggle::before {
   mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
-}
-html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
-  transform: scaleX(-1);
+  transform: scaleX(var(--dir-factor));
 }
 
 .toolbarButton.findPrevious::before {
@@ -1000,9 +991,7 @@ html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
 
 #viewOutline.toolbarButton::before {
   mask-image: var(--toolbarButton-viewOutline-icon);
-}
-html[dir="rtl"] #viewOutline.toolbarButton::before {
-  transform: scaleX(-1);
+  transform: scaleX(var(--dir-factor));
 }
 
 #viewAttachments.toolbarButton::before {
@@ -1015,9 +1004,7 @@ html[dir="rtl"] #viewOutline.toolbarButton::before {
 
 #currentOutlineItem.toolbarButton::before {
   mask-image: var(--toolbarButton-currentOutlineItem-icon);
-}
-html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
-  transform: scaleX(-1);
+  transform: scaleX(var(--dir-factor));
 }
 
 #viewFind.toolbarButton::before {
@@ -1317,9 +1304,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 }
 .treeItemToggler.treeItemsHidden::before {
   mask-image: var(--treeitem-collapsed-icon);
-}
-html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
-  transform: scaleX(-1);
+  transform: scaleX(var(--dir-factor));
 }
 .treeItemToggler.treeItemsHidden ~ .treeItems {
   display: none;