fix(tab-bar): adjust badge positioning for ionic theme (#30977)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The badge positioning for the tab bar did not match our design
specifications.
 
## What is the new behavior?
Updates the tab bar badge to be positioned according to design
specifications.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


[Preview](https://ionic-framework-git-rou-12460-fix-badge-positioning-ionic1.vercel.app/src/components/tab-bar/test/basic/?ionic:theme=ionic)

---------

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

Author: OS-susmitabhowmik

core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png

@@ -99,7 +99,7 @@
           <ion-tab-button tab="1">
             <ion-icon name="heart"></ion-icon>
             <ion-label>Favorites</ion-label>
-            <ion-badge color="danger"></ion-badge>
+            <ion-badge color="danger" size="medium"></ion-badge>
           </ion-tab-button>
 
           <ion-tab-button tab="2">

core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png

@@ -103,7 +103,13 @@
 // --------------------------------------------------
 
 :host ::slotted(ion-badge) {
-  @include globals.position(null, null, null, calc(50% + globals.$ion-scale-300));
+  @include globals.position(calc(globals.$ion-scale-100 * -2), null, null, calc(50% + globals.$ion-scale-300));
+  transform: translateX(-50%);
+}
+
+// Status badge (empty) needs less offset to overlap the icon
+:host ::slotted(ion-badge:empty) {
+  @include globals.position(calc(globals.$ion-scale-100 * -1), null, null, calc(50% + globals.$ion-scale-250));
 }
 
 :host ::slotted(ion-badge.badge-vertical-top) {