@import "./badge.native";
@import "./badge.ios.vars";

// iOS Badge
// --------------------------------------------------

:host {
  @include border-radius($badge-ios-border-radius);

  /**
   * "-apple-system-body" on iOS never goes smaller than
   * 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications.
   * However, we still keep the max() usage here for consistency
   * with other components and in case "-apple-system-body" does
   * go smaller than 14px in the future.
   */
  font-size: dynamic-font-min(1, $badge-baseline-font-size);
}

// Badge Inside Tab Button
// --------------------------------------------------

:host([vertical].in-tab-button) {
  position: relative;

  min-width: $badge-ios-in-tab-button-min-width;
}

:host([vertical].in-tab-button) ::slotted(ion-icon) {
  @include position(50%, null, null, 50%);

  position: absolute;

  width: $badge-ios-in-tab-button-icon-size;
  height: $badge-ios-in-tab-button-icon-size;

  transform: translate(-50%, -50%);
}