perf(material/table): Use text-align: start instead of descendent dir selector. (#32585)

(cherry picked from commit 89bdf48)

Author: kseamon

src/material/table/table.scss

@@ -14,7 +14,10 @@ $fallbacks: m3-table.get-tokens();
 
 @mixin _cell-border {
   border-bottom-color: token-utils.slot(
-      table-row-item-outline-color, $fallbacks, rgba(0, 0, 0, 0.12));
+    table-row-item-outline-color,
+    $fallbacks,
+    rgba(0, 0, 0, 0.12)
+  );
   border-bottom-width: token-utils.slot(table-row-item-outline-width, $fallbacks, 1px);
   border-bottom-style: solid;
 }
@@ -39,12 +42,8 @@ $fallbacks: m3-table.get-tokens();
 .mdc-data-table__cell {
   box-sizing: border-box;
   overflow: hidden;
-  text-align: left;
+  text-align: start;
   text-overflow: ellipsis;
-
-  [dir='rtl'] & {
-    text-align: right;
-  }
 }
 
 .mdc-data-table__cell,
@@ -87,7 +86,10 @@ $fallbacks: m3-table.get-tokens();
   height: token-utils.slot(table-footer-container-height, $fallbacks, 52px);
   color: token-utils.slot(table-row-item-label-text-color, $fallbacks, rgba(0, 0, 0, 0.87));
   font-family: token-utils.slot(
-      table-footer-supporting-text-font, $fallbacks, (Roboto, sans-serif));
+    table-footer-supporting-text-font,
+    $fallbacks,
+    (Roboto, sans-serif)
+  );
   line-height: token-utils.slot(table-footer-supporting-text-line-height, $fallbacks);
   font-size: token-utils.slot(table-footer-supporting-text-size, $fallbacks, 14px);
   font-weight: token-utils.slot(table-footer-supporting-text-weight, $fallbacks);
@@ -103,11 +105,7 @@ $fallbacks: m3-table.get-tokens();
   text-overflow: ellipsis;
   overflow: hidden;
   outline: none;
-  text-align: left;
-
-  [dir='rtl'] & {
-    text-align: right;
-  }
+  text-align: start;
 
   .mdc-data-table__row:last-child > & {
     border-bottom: none;
@@ -131,15 +129,22 @@ $fallbacks: m3-table.get-tokens();
 // MDC table rows are styled with a top border, whereas our legacy flex table styles rows with
 // a bottom border. Remove the bottom border style from the rows and let MDC display its top
 // border.
-mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row {
+mat-row.mat-mdc-row,
+mat-header-row.mat-mdc-header-row,
+mat-footer-row.mat-mdc-footer-row {
   border-bottom: none;
 }
 
 // Cells need to inherit their background in order to overlap each other when sticky.
 // The background needs to be inherited from the table, tbody/tfoot, row, and cell.
-.mat-mdc-table tbody, .mat-mdc-table tfoot, .mat-mdc-table thead,
-.mat-mdc-cell, .mat-mdc-footer-cell,
-.mat-mdc-header-row, .mat-mdc-row, .mat-mdc-footer-row,
+.mat-mdc-table tbody,
+.mat-mdc-table tfoot,
+.mat-mdc-table thead,
+.mat-mdc-cell,
+.mat-mdc-footer-cell,
+.mat-mdc-header-row,
+.mat-mdc-row,
+.mat-mdc-footer-row,
 .mat-mdc-table .mat-mdc-header-cell {
   background: inherit;
 }