CR

Author: OS-pedrolourenco

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

@@ -1,6 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./badge.common";
-@import "../../themes/mixins";
 
 // Ionic Badge
 // --------------------------------------------------
@@ -198,11 +197,11 @@
 :host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),
 :host([vertical]:not(.in-tab-button).in-button.badge-xsmall),
 :host([vertical]:not(.in-tab-button).in-button.badge-small) {
-  @include position(null, calc(-1 * var(globals.$ion-space-050)), null, null);
+  @include globals.position(null, calc(-1 * var(globals.$ion-space-050)));
 }
 
 :host([vertical]:not(.in-tab-button).in-button.badge-medium),
 :host([vertical]:not(.in-tab-button).in-button.badge-large),
 :host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
-  @include position(null, globals.$ion-space-050, null, null);
+  @include globals.position(null, globals.$ion-space-050);
 }

core/src/components/button/button.common.scss

@@ -311,18 +311,19 @@ ion-ripple-effect {
 // Button Badge
 // --------------------------------------------------
 
-.button-native {
-  overflow: visible;
+.button-native ion-ripple-effect,
+.button-native::after {
+  @include border-radius(inherit);
+}
 
-  ion-ripple-effect {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: inherit;
-  }
+// This rule works for Chrome.
+:has(ion-badge) .button-native {
+  --overflow: visible;
+}
 
-  &::after {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: inherit;
-  }
+// This rule works for the rest of the browsers.
+:host(:has(ion-badge)) .button-native {
+  --overflow: visible;
 }
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {