add best effort for ios/md styles

Author: BenOsodrac

core/src/components/avatar/avatar.common.scss

@@ -24,4 +24,4 @@
   object-fit: cover;
 
   overflow: hidden;
-}
+}

core/src/components/avatar/avatar.md.scss

@@ -21,3 +21,11 @@
 ::slotted(ion-badge.badge-vertical-bottom:empty) {
   transform: translateX(-100%);
 }
+
+:host ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
+  transform: translate(0, 100%);
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
+  transform: translate(0, -100%);
+}

core/src/components/badge/badge.common.scss

@@ -63,3 +63,11 @@
 :host(:not(.in-tab-button)[vertical].badge-vertical-bottom) {
   bottom: 0;
 }
+
+:host([vertical]) ::slotted(ion-icon) {
+  @include position(50%, null, null, 50%);
+
+  position: absolute;
+
+  transform: translate(-50%, -50%);
+}

core/src/components/badge/badge.common.vars.scss

@@ -26,3 +26,9 @@ $badge-font-size: dynamic-font($badge-baseline-font-size);
 
 /// @prop - Font weight of the badge
 $badge-font-weight: bold;
+
+/// @prop - Font size of the badge hint
+$badge-hint-baseline-font-size: 8px;
+
+/// @prop - Font size of the badge hint
+$badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);

core/src/components/badge/badge.ionic.scss

@@ -202,14 +202,6 @@
 
 // Icon Inside Badge Hint
 // --------------------------------------------------
-:host([vertical]) ::slotted(ion-icon) {
-  @include globals.position(50%, null, null, 50%);
-
-  position: absolute;
-
-  transform: translate(-50%, -50%);
-}
-
 :host([vertical]) ::slotted(ion-icon) {
   width: globals.$ion-scale-300;
   height: globals.$ion-scale-300;

core/src/components/badge/badge.native.scss

@@ -13,14 +13,17 @@
 }
 
 // TODO(ROU-10747): Review size styles when sizes are defined for native themes.
-:host(:empty) {
+:host([vertical]) {
   --padding-start: 0;
   --padding-end: 0;
   --padding-bottom: 0;
   --padding-top: 0;
 
+  font-size: $badge-hint-baseline-font-size;
+  line-height: 10px;
+
   @include border-radius(999px);
 
   width: $badge-min-width;
   height: $badge-min-width;
-}
+}