@import "../../themes/native/native.globals.md";
@import "./badge.common";
@import "./badge.native.vars";

// Badge
// --------------------------------------------------

:host {
  --padding-top: #{$badge-padding-top};
  --padding-end: #{$badge-padding-end};
  --padding-bottom: #{$badge-padding-bottom};
  --padding-start: #{$badge-padding-start};
  --background: #{ion-color(primary, base)};
  --color: #{ion-color(primary, contrast)};

  min-width: $badge-min-width;

  font-family: $font-family-base;

  font-size: $badge-font-size;
  font-weight: $badge-font-weight;

  line-height: 1;
}

:host(.ion-color) {
  background: current-color(base);
  color: current-color(contrast);
}

// TODO(ROU-10747): Review size styles when sizes are defined for native themes.
:host([vertical]:not(.in-button):not(.in-tab-button)),
:host(:empty) {
  --padding-start: 0;
  --padding-end: 0;
  --padding-bottom: 0;
  --padding-top: 0;

  @include border-radius(999px);

  width: $badge-min-width;
  height: $badge-min-width;

  font-size: $badge-hint-font-size;

  line-height: 10px;
}

// Badge in Button
// --------------------------------------------------

:host(:not(:empty).in-button) {
  min-width: $badge-size-in-button;
  height: $badge-size-in-button;

  font-size: $badge-font-size-in-button;

  line-height: $badge-line-height-in-button;

  ::slotted(ion-icon) {
    width: $badge-icon-size-in-button;
    height: $badge-icon-size-in-button;
  }
}