@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./badge.common";

// Ionic Badge
// --------------------------------------------------

:host {
  --padding-start: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-200};
  --padding-top: #{globals.$ion-space-0};
  --padding-bottom: #{globals.$ion-space-0};

  @include globals.typography(globals.$ion-body-sm-medium);

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: globals.$ion-scale-250;
}

// Bold Badge
// --------------------------------------------------

:host(.badge-bold) {
  --background: #{globals.ion-color(primary, base)};
  --color: #{globals.ion-color(primary, contrast)};
}

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

// Subtle Badge
// --------------------------------------------------

:host(.badge-subtle) {
  --background: #{globals.ion-color(primary, base, $subtle: true)};
  --color: #{globals.ion-color(primary, contrast, $subtle: true)};
}

:host(.badge-subtle.ion-color) {
  background: globals.current-color(base, $subtle: true);
  color: globals.current-color(contrast, $subtle: true);
}

// Badge Shapes
// --------------------------------------------------

/* Soft Badge */
:host(.badge-soft) {
  @include globals.border-radius(globals.$ion-soft-xs);
}

:host(.badge-small.badge-soft) {
  @include globals.border-radius(globals.$ion-soft-2xs);
}

/* Round Badge */
:host(.badge-round) {
  @include globals.border-radius(globals.$ion-round-sm);
}

/* Rectangular Badge */
:host(.badge-rectangular) {
  @include globals.border-radius(globals.$ion-rectangular-sm);
}

// Badge Sizes
// --------------------------------------------------

/* Small Badge */
:host(.badge-small) {
  --padding-start: #{globals.$ion-space-050};
  --padding-end: #{globals.$ion-space-050};

  min-width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;
}

:host(.badge-small) ::slotted(ion-icon) {
  width: globals.$ion-scale-300;
  height: globals.$ion-scale-300;
}

/* Medium Badge */
/* Large size defaults to the medium size to avoid styles breakage */
:host(.badge-medium),
:host(.badge-large) {
  --padding-start: #{globals.$ion-space-100};
  --padding-end: #{globals.$ion-space-100};

  @include globals.typography(globals.$ion-body-md-medium);

  min-width: globals.$ion-scale-600;
  height: globals.$ion-scale-600;
}

:host(.badge-medium) ::slotted(ion-icon),
:host(.badge-large) ::slotted(ion-icon) {
  width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;
}

// Badge (hint)
// --------------------------------------------------

:host(:empty) {
  --padding-start: 0;
  --padding-end: 0;
}

:host([vertical]:not(:empty)) {
  --padding-start: #{globals.$ion-scale-100};
  --padding-end: #{globals.$ion-scale-100};
  --padding-top: #{globals.$ion-scale-100};
  --padding-bottom: #{globals.$ion-scale-100};
}

// Badge (hint) Sizes
// --------------------------------------------------

/* sm */
:host(.badge-small:empty) {
  min-width: globals.$ion-scale-200;
  height: globals.$ion-scale-200;
}

/* md */
:host(.badge-medium:empty) {
  min-width: globals.$ion-scale-300;
  height: globals.$ion-scale-300;
}

/* lg */
:host(.badge-large:empty) {
  min-width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;
}

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

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

// Icon Inside Badge Hint
// --------------------------------------------------
:host([vertical]) ::slotted(ion-icon) {
  @include globals.position(50%, null, null, 50%);

  position: absolute;

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

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

:host(:not(:empty).in-button) {
  --padding-start: #{globals.$ion-scale-050};
  --padding-end: #{globals.$ion-scale-050};

  @include globals.typography(globals.$ion-body-action-xs);

  min-width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;

  ::slotted(ion-icon) {
    width: globals.$ion-scale-300;
    height: globals.$ion-scale-300;
  }
}