@use "../../themes/mixins" as mixins;
@use "../../themes/functions.color" as colors;

// Badge: Common Styles
// --------------------------------------------------

:host {
  /**
   * @prop --background: Background of the badge
   * @prop --color: Text color of the badge
   *
   * @prop --padding-top: Top padding of the badge
   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge
   * @prop --padding-bottom: Bottom padding of the badge
   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
   */
  @include mixins.font-smoothing();

  display: inline-flex;

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

  font-family: var(--ion-badge-font-family, inherit);

  white-space: nowrap;

  contain: content;
  vertical-align: baseline;
}

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

// Default
:host(.badge-bold) {
  background: var(--ion-badge-hue-bold-default-background);
  color: var(--ion-badge-hue-bold-default-color);
}

// Colors
:host(.badge-bold.ion-color) {
  background: var(--ion-badge-hue-bold-semantic-default-background);
  color: var(--ion-badge-hue-bold-semantic-default-color);
}

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

// Default
:host(.badge-subtle) {
  background: var(--ion-badge-hue-subtle-default-background);
  color: var(--ion-badge-hue-subtle-default-color);
}

// Colors
:host(.badge-subtle.ion-color) {
  background: var(--ion-badge-hue-subtle-semantic-default-background);
  color: var(--ion-badge-hue-subtle-semantic-default-color);
}

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

:host(.badge-soft) {
  @include mixins.border-radius(var(--ion-badge-shape-soft-border-radius));
}

:host(.badge-round) {
  @include mixins.border-radius(var(--ion-badge-shape-round-border-radius));
}

:host(.badge-rectangular) {
  @include mixins.border-radius(var(--ion-badge-shape-rectangular-border-radius));
}

// Badge Sizes: Content (with text or an icon)
// ---------------------------------------------

// Small
:host(.badge-small) {
  @include mixins.padding(
    var(--ion-badge-size-small-content-padding-top),
    var(--ion-badge-size-small-content-padding-end),
    var(--ion-badge-size-small-content-padding-bottom),
    var(--ion-badge-size-small-content-padding-start)
  );

  min-width: var(--ion-badge-size-small-content-min-width);
  height: var(--ion-badge-size-small-content-height);

  font-size: var(--ion-badge-size-small-content-font-size);
  font-weight: var(--ion-badge-size-small-content-font-weight);

  line-height: var(--ion-badge-size-small-content-line-height);
}

:host(.badge-small) ::slotted(ion-icon) {
  width: var(--ion-badge-size-small-content-icon-width, revert-layer);
  height: var(--ion-badge-size-small-content-icon-height, revert-layer);
}

// Medium
:host(.badge-medium) {
  @include mixins.padding(
    var(--ion-badge-size-medium-content-padding-top),
    var(--ion-badge-size-medium-content-padding-end),
    var(--ion-badge-size-medium-content-padding-bottom),
    var(--ion-badge-size-medium-content-padding-start)
  );

  min-width: var(--ion-badge-size-medium-content-min-width);
  height: var(--ion-badge-size-medium-content-height);

  font-size: var(--ion-badge-size-medium-content-font-size);
  font-weight: var(--ion-badge-size-medium-content-font-weight);

  line-height: var(--ion-badge-size-medium-content-line-height);
}

:host(.badge-medium) ::slotted(ion-icon) {
  width: var(--ion-badge-size-medium-content-icon-width, revert-layer);
  height: var(--ion-badge-size-medium-content-icon-height, revert-layer);
}

// Large
:host(.badge-large) {
  @include mixins.padding(
    var(--ion-badge-size-large-content-padding-top),
    var(--ion-badge-size-large-content-padding-end),
    var(--ion-badge-size-large-content-padding-bottom),
    var(--ion-badge-size-large-content-padding-start)
  );

  min-width: var(--ion-badge-size-large-content-min-width);
  height: var(--ion-badge-size-large-content-height);

  font-size: var(--ion-badge-size-large-content-font-size);
  font-weight: var(--ion-badge-size-large-content-font-weight);

  line-height: var(--ion-badge-size-large-content-line-height);
}

:host(.badge-large) ::slotted(ion-icon) {
  width: var(--ion-badge-size-large-content-icon-width, revert-layer);
  height: var(--ion-badge-size-large-content-icon-height, revert-layer);
}

// Badge Sizes: Dot (empty with no text or icon)
// ---------------------------------------------

// Small
:host(.badge-small:empty) {
  @include mixins.padding(
    var(--ion-badge-size-small-dot-padding-top),
    var(--ion-badge-size-small-dot-padding-end),
    var(--ion-badge-size-small-dot-padding-bottom),
    var(--ion-badge-size-small-dot-padding-start)
  );

  min-width: var(--ion-badge-size-small-dot-min-width);
  height: var(--ion-badge-size-small-dot-height);
}

// Medium
:host(.badge-medium:empty) {
  @include mixins.padding(
    var(--ion-badge-size-medium-dot-padding-top),
    var(--ion-badge-size-medium-dot-padding-end),
    var(--ion-badge-size-medium-dot-padding-bottom),
    var(--ion-badge-size-medium-dot-padding-start)
  );

  min-width: var(--ion-badge-size-medium-dot-min-width);
  height: var(--ion-badge-size-medium-dot-height);
}

// Large
:host(.badge-large:empty) {
  @include mixins.padding(
    var(--ion-badge-size-large-dot-padding-top),
    var(--ion-badge-size-large-dot-padding-end),
    var(--ion-badge-size-large-dot-padding-bottom),
    var(--ion-badge-size-large-dot-padding-start)
  );

  min-width: var(--ion-badge-size-large-dot-min-width);
  height: var(--ion-badge-size-large-dot-height);
}

// Anchored Badge (positioned at a specific corner of its parent element)
// ---------------------------------------------

:host([vertical]) {
  position: absolute;

  z-index: 1;
}