fix(tab-bar): apply safe area to proper side regardless of direction (#28372)

Issue number: Internal

---------

## What is the current behavior?
The safe area padding (both left and right) swap sides when the app's
direction changes from LTR to RTL. The `--ion-safe-area-left` should
always apply to the left side of the device and the
`--ion-safe-area-right` should always apply to the right side of the
device.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the tab bar stylesheet to always set `padding-left` and
`padding-right`
- Adds an e2e test for the basic directory which adds screenshots in
both modes/directions for:
  - the default tab bar
  - a tab bar with safe area left applied
  - a tab bar with safe area right applied

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/tab-bar/tab-bar.scss

@@ -6,9 +6,6 @@
    * @prop --border: Border of the tab bar
    * @prop --color: Color of the tab bar
    */
-
-  @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
-
   display: flex;
 
   align-items: center;
@@ -16,7 +13,11 @@
 
   width: auto;
 
+  /* stylelint-disable */
+  padding-right: var(--ion-safe-area-right);
   padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
 
   border-top: var(--border);
 

core/src/components/tab-bar/test/basic/tab-bar.e2e.ts

@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior needs to be tested in both modes and directions to
+ * make sure the safe area padding is applied only to that side
+ * regardless of direction
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-tab-bar selected-tab="1">
+            <ion-tab-button tab="1">
+              <ion-label>Recents</ion-label>
+            </ion-tab-button>
+
+            <ion-tab-button tab="2">
+              <ion-label>Favorites</ion-label>
+              <ion-badge>23</ion-badge>
+            </ion-tab-button>
+
+            <ion-tab-button tab="3">
+              <ion-label>Settings</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-safe-area`));
+      });
+    });
+  });
+});