Simplify RTL handling with logical properties

src/components/progress-bar/progress-bar.css

@@ -39,10 +39,6 @@
   animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
 }
 
-.progress-bar--indeterminate.progress-bar--rtl .indicator {
-  animation-name: indeterminate-rtl;
-}
-
 @media (forced-colors: active) {
   .progress-bar {
     outline: solid 1px SelectedItem;
@@ -57,24 +53,13 @@
 
 @keyframes indeterminate {
   0% {
-    left: -50%;
+    inset-inline-start: -50%;
     width: 50%;
   }
-  75%,
-  100% {
-    left: 100%;
-    width: 50%;
-  }
-}
 
-@keyframes indeterminate-rtl {
-  0% {
-    right: -50%;
-    width: 50%;
-  }
   75%,
   100% {
-    right: 100%;
+    inset-inline-start: 100%;
     width: 50%;
   }
 }

src/components/tab-group/tab-group.css

@@ -41,21 +41,11 @@
 }
 
 .scroll-button-start {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .scroll-button-end {
-  right: 0;
-}
-
-.tab-group--rtl .scroll-button-start {
-  left: auto;
-  right: 0;
-}
-
-.tab-group--rtl .scroll-button-end {
-  left: 0;
-  right: auto;
+  inset-inline-end: 0;
 }
 
 /*
@@ -179,15 +169,10 @@
 }
 
 .tab-group--start .indicator {
-  right: calc(-1 * var(--track-width));
+  inset-inline-end: calc(-1 * var(--track-width));
   border-right: solid var(--track-width) var(--indicator-color);
 }
 
-.tab-group--start.tab-group--rtl .indicator {
-  right: auto;
-  left: calc(-1 * var(--track-width));
-}
-
 .tab-group--start .body {
   flex: 1 1 auto;
   order: 2;
@@ -221,15 +206,10 @@
 }
 
 .tab-group--end .indicator {
-  left: calc(-1 * var(--track-width));
+  inset-inline-start: calc(-1 * var(--track-width));
   border-inline-start: solid var(--track-width) var(--indicator-color);
 }
 
-.tab-group--end.tab-group--rtl .indicator {
-  right: calc(-1 * var(--track-width));
-  left: auto;
-}
-
 .tab-group--end .body {
   flex: 1 1 auto;
   order: 1;

src/components/tree-item/tree-item.css

@@ -135,16 +135,11 @@ slot:not([name])::slotted(wa-icon) {
   position: absolute;
   top: var(--indent-guide-offset);
   bottom: var(--indent-guide-offset);
-  left: calc(1em - (var(--indent-guide-width) / 2) - 1px);
+  inset-inline-start: calc(1em - (var(--indent-guide-width) / 2) - 1px);
   border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
   z-index: 1;
 }
 
-.tree-item--rtl .children::before {
-  left: auto;
-  right: 1em;
-}
-
 @media (forced-colors: active) {
   :host(:not([aria-disabled='true'])) .tree-item--selected .item {
     outline: dashed 1px SelectedItem;