@ionic/core 7.6.7-dev.11707162903.1706e75f → 7.6.7-dev.11707240912.19856295

package/dist/collection/components/searchbar/searchbar.md.css

@@ -70,7 +70,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: flex;
@@ -262,10 +262,10 @@
   --background: var(--ion-background-color, #fff);
   --border-radius: 2px;
   --box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  --cancel-button-color: var(--ion-color-step-900, var(--ion-text-color-step-100, #1a1a1a));
+  --cancel-button-color: var(--ion-color-step-900, #1a1a1a);
   --clear-button-color: initial;
-  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
-  --icon-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --color: var(--ion-color-step-850, #262626);
+  --icon-color: var(--ion-color-step-600, #666666);
   -webkit-padding-start: 8px;
   padding-inline-start: 8px;
   -webkit-padding-end: 8px;
@@ -280,32 +280,8 @@
   width: 1.3125rem;
   height: 1.3125rem;
 }
-@supports (inset-inline-start: 0) {
-  .searchbar-search-icon {
-    inset-inline-start: 16px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .searchbar-search-icon {
-    left: 16px;
-  }
-  :host-context([dir=rtl]) .searchbar-search-icon {
-    left: unset;
-    right: unset;
-    right: 16px;
-  }
-  [dir=rtl] .searchbar-search-icon {
-    left: unset;
-    right: unset;
-    right: 16px;
-  }
-  @supports selector(:dir(rtl)) {
-    .searchbar-search-icon:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 16px;
-    }
-  }
+.searchbar-search-icon {
+  inset-inline-start: 16px;
 }
 
 .searchbar-cancel-button {
@@ -319,32 +295,8 @@
   background-color: transparent;
   font-size: 1.5em;
 }
-@supports (inset-inline-start: 0) {
-  .searchbar-cancel-button {
-    inset-inline-start: 9px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .searchbar-cancel-button {
-    left: 9px;
-  }
-  :host-context([dir=rtl]) .searchbar-cancel-button {
-    left: unset;
-    right: unset;
-    right: 9px;
-  }
-  [dir=rtl] .searchbar-cancel-button {
-    left: unset;
-    right: unset;
-    right: 9px;
-  }
-  @supports selector(:dir(rtl)) {
-    .searchbar-cancel-button:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 9px;
-    }
-  }
+.searchbar-cancel-button {
+  inset-inline-start: 9px;
 }
 
 .searchbar-search-icon,
@@ -395,32 +347,8 @@
   border: 0;
   background-color: transparent;
 }
-@supports (inset-inline-start: 0) {
-  .searchbar-clear-button {
-    inset-inline-end: 13px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .searchbar-clear-button {
-    right: 13px;
-  }
-  :host-context([dir=rtl]) .searchbar-clear-button {
-    left: unset;
-    right: unset;
-    left: 13px;
-  }
-  [dir=rtl] .searchbar-clear-button {
-    left: unset;
-    right: unset;
-    left: 13px;
-  }
-  @supports selector(:dir(rtl)) {
-    .searchbar-clear-button:dir(rtl) {
-      left: unset;
-      right: unset;
-      left: 13px;
-    }
-  }
+.searchbar-clear-button {
+  inset-inline-end: 13px;
 }
 
 .searchbar-clear-button.ion-activated {

package/dist/collection/components/segment-button/segment-button.ios.css

@@ -365,7 +365,7 @@ ion-ripple-effect {
   --border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);
   --border-style: solid;
   --indicator-box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
-  --indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));
+  --indicator-color: var(--ion-color-step-350, var(--ion-background-color, #fff));
   --indicator-height: 100%;
   --indicator-transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
   --indicator-transform: none;
@@ -476,7 +476,7 @@ ion-ripple-effect {
 }
 
 :host(.in-segment-color) .segment-button-indicator-background {
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));
+  background: var(--ion-color-step-350, var(--ion-background-color, #fff));
 }
 
 @media (any-hover: hover) {
@@ -489,7 +489,7 @@ ion-ripple-effect {
   --background-checked: var(--ion-toolbar-segment-background-checked, none);
   --color: var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);
   --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);
-  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff))));
+  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color, #fff)));
 }
 
 /**

package/dist/collection/components/select/select.ios.css

@@ -80,7 +80,7 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
@@ -183,28 +183,10 @@
   align-items: center;
   opacity: 0;
 }
-@supports (inset-inline-start: 0) {
-  :host(.legacy-select) label {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.legacy-select) label {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.legacy-select) label, :host-context([dir=rtl]).legacy-select label {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.legacy-select:dir(rtl)) label {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+:host(.legacy-select) label {
+  inset-inline-start: 0;
 }
+
 :host(.legacy-select) label::-moz-focus-inner {
   border: 0;
 }
@@ -756,7 +738,7 @@ button {
 .select-icon {
   width: 1.125rem;
   height: 1.125rem;
-  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
+  color: var(--ion-color-step-650, #595959);
 }
 
 :host(.select-label-placement-stacked) .select-wrapper-inner,

package/dist/collection/components/select/select.md.css

@@ -80,7 +80,7 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
@@ -183,28 +183,10 @@
   align-items: center;
   opacity: 0;
 }
-@supports (inset-inline-start: 0) {
-  :host(.legacy-select) label {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.legacy-select) label {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.legacy-select) label, :host-context([dir=rtl]).legacy-select label {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.legacy-select:dir(rtl)) label {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+:host(.legacy-select) label {
+  inset-inline-start: 0;
 }
+
 :host(.legacy-select) label::-moz-focus-inner {
   border: 0;
 }
@@ -802,8 +784,8 @@ button {
  * }
  */
 :host(.select-fill-solid) {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --background: var(--ion-color-step-50, #f2f2f2);
+  --border-color: var(--ion-color-step-500, gray);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -839,8 +821,8 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-solid:hover) {
-    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --background: var(--ion-color-step-100, #e6e6e6);
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -849,8 +831,8 @@ button {
  */
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.ion-focused) {
-  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
-  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+  --background: var(--ion-color-step-150, #d9d9d9);
+  --border-color: var(--ion-color-step-750, #404040);
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -943,7 +925,7 @@ button {
  * }
  */
 :host(.select-fill-outline) {
-  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
+  --border-color: var(--ion-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -971,7 +953,7 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -1186,7 +1168,7 @@ button {
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
 }
 
 :host(.legacy-select) {
@@ -1199,7 +1181,7 @@ button {
 .select-icon {
   width: 0.8125rem;
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+  color: var(--ion-color-step-500, gray);
 }
 
 /**
@@ -1230,32 +1212,8 @@ button {
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-@supports (inset-inline-start: 0) {
-  .select-highlight {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .select-highlight {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .select-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .select-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .select-highlight:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.select-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.select-expanded) .select-highlight,
@@ -1271,27 +1229,8 @@ button {
 :host(.in-item) .select-highlight {
   bottom: 0;
 }
-@supports (inset-inline-start: 0) {
-  :host(.in-item) .select-highlight {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.in-item) .select-highlight {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.in-item) .select-highlight, :host-context([dir=rtl]).in-item .select-highlight {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.in-item:dir(rtl)) .select-highlight {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+:host(.in-item) .select-highlight {
+  inset-inline-start: 0;
 }
 
 /**

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -207,7 +207,7 @@
  * }
  */
 :host {
-  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   --side-min-width: 270px;
   --side-max-width: 28%;
 }

package/dist/collection/components/split-pane/split-pane.md.css

@@ -207,7 +207,7 @@
  * }
  */
 :host {
-  --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
   --side-min-width: 270px;
   --side-max-width: 28%;
 }

package/dist/collection/components/tab-bar/tab-bar.ios.css

@@ -230,10 +230,10 @@
  * }
  */
 :host {
-  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
+  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
-  --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));
+  --border: 0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));
+  --color: var(--ion-tab-bar-color, var(--ion-color-step-600, #666666));
   --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
   height: 50px;
 }

package/dist/collection/components/tab-bar/tab-bar.md.css

@@ -232,8 +232,8 @@
 :host {
   --background: var(--ion-tab-bar-background, var(--ion-background-color, #fff));
   --background-focused: var(--ion-tab-bar-background-focused, #e0e0e0);
-  --border: 1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))));
-  --color: var(--ion-tab-bar-color, var(--ion-color-step-650, var(--ion-text-color-step-350, #595959)));
+  --border: 1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.07))));
+  --color: var(--ion-tab-bar-color, var(--ion-color-step-650, #595959));
   --color-selected: var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));
   height: 56px;
 }

package/dist/collection/components/tab-button/tab-button.ios.css

@@ -301,32 +301,8 @@ ion-ripple-effect {
   font-size: 12px;
   line-height: 16px;
 }
-@supports (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 6px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    left: calc(50% + 6px);
-  }
-  :host-context([dir=rtl]) ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  [dir=rtl] ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  @supports selector(:dir(rtl)) {
-    ::slotted(ion-badge):dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 6px);
-    }
-  }
+::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 6px);
 }
 
 ::slotted(ion-icon) {
@@ -374,27 +350,8 @@ ion-ripple-effect {
   font-size: 24px;
 }
 
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 12px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    left: calc(50% + 12px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 12px);
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 12px);
-    }
-  }
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 12px);
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -410,58 +367,18 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 10px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 35px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    left: calc(50% + 35px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 35px);
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 35px);
-    }
-  }
+:host(.tab-layout-icon-start) ::slotted(ion-badge),
+:host(.tab-layout-icon-end) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 35px);
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-badge),
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 10px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 30px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    left: calc(50% + 30px);
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 30px);
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 30px);
-    }
-  }
+:host(.tab-layout-icon-hide) ::slotted(ion-badge),
+:host(.tab-has-label-only) ::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 30px);
 }
 
 :host(.tab-layout-label-hide) ::slotted(ion-badge),

package/dist/collection/components/tab-button/tab-button.md.css

@@ -334,32 +334,8 @@ ion-ripple-effect {
   font-size: 8px;
   font-weight: normal;
 }
-@supports (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    inset-inline-start: calc(50% + 6px);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  ::slotted(ion-badge) {
-    left: calc(50% + 6px);
-  }
-  :host-context([dir=rtl]) ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  [dir=rtl] ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: calc(50% + 6px);
-  }
-  @supports selector(:dir(rtl)) {
-    ::slotted(ion-badge):dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% + 6px);
-    }
-  }
+::slotted(ion-badge) {
+  inset-inline-start: calc(50% + 6px);
 }
 
 ::slotted(ion-badge:empty) {
@@ -381,27 +357,8 @@ ion-ripple-effect {
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
   top: 8px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    inset-inline-start: 70%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
-    left: 70%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-bottom) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-bottom ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 70%;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-bottom:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: 70%;
-    }
-  }
+:host(.tab-layout-icon-bottom) ::slotted(ion-badge) {
+  inset-inline-start: 70%;
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-icon) {
@@ -418,29 +375,9 @@ ion-ripple-effect {
 :host(.tab-layout-icon-end) ::slotted(ion-badge) {
   top: 16px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    inset-inline-start: 80%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-start) ::slotted(ion-badge),
-  :host(.tab-layout-icon-end) ::slotted(ion-badge) {
-    left: 80%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-start) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-start ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-layout-icon-end) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-end ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 80%;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-start:dir(rtl)) ::slotted(ion-badge), :host(.tab-layout-icon-end:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: 80%;
-    }
-  }
+:host(.tab-layout-icon-start) ::slotted(ion-badge),
+:host(.tab-layout-icon-end) ::slotted(ion-badge) {
+  inset-inline-start: 80%;
 }
 
 :host(.tab-layout-icon-start) ::slotted(ion-icon) {
@@ -457,29 +394,9 @@ ion-ripple-effect {
 :host(.tab-has-label-only) ::slotted(ion-badge) {
   top: 16px;
 }
-@supports (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    inset-inline-start: 70%;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.tab-layout-icon-hide) ::slotted(ion-badge),
-  :host(.tab-has-label-only) ::slotted(ion-badge) {
-    left: 70%;
-  }
-  :host-context([dir=rtl]):host(.tab-layout-icon-hide) ::slotted(ion-badge), :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge), :host-context([dir=rtl]):host(.tab-has-label-only) ::slotted(ion-badge), :host-context([dir=rtl]).tab-has-label-only ::slotted(ion-badge) {
-    left: unset;
-    right: unset;
-    right: 70%;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.tab-layout-icon-hide:dir(rtl)) ::slotted(ion-badge), :host(.tab-has-label-only:dir(rtl)) ::slotted(ion-badge) {
-      left: unset;
-      right: unset;
-      right: 70%;
-    }
-  }
+:host(.tab-layout-icon-hide) ::slotted(ion-badge),
+:host(.tab-has-label-only) ::slotted(ion-badge) {
+  inset-inline-start: 70%;
 }
 
 :host(.tab-layout-icon-hide) ::slotted(ion-label),