:host(us-badge) {
  display: inline-block;
}

:host {
  .usbadge {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--badge-general-v-padding) - 2px)
          calc(var(--badge-general-h-padding) - 2px);
    border-radius: var(--badge-general-border-radius);
    border-width: 2px;
    border-style: solid;
    font: var(--text-p-s-heavy);
    white-space: nowrap;

    &_round {
      border: none;
      padding: var(--badge-general-v-padding);
      border-radius: 50%;
    }

    /* Ensure the badge is always aligned on the baseline */
    &::before {
      content: "\2003";
      display: inline-block;
      width: 0;
    }

    slot[name=trailingIcon]::slotted(us-icon), .usbadge__icon {
      margin-left: var(--space-inline-xs);
    }

    &_low-contrast {
      &.usbadge_neutral-status {
        color: var(--badge-low-contrast-neutral-text-color);
        background-color: var(--badge-low-contrast-neutral-background-color);
        border-color: var(--badge-low-contrast-neutral-border-color);
      }

      &.usbadge_error-status {
        color: var(--badge-low-contrast-error-text-color);
        background-color: var(--badge-low-contrast-error-background-color);
        border-color: var(--badge-low-contrast-error-border-color);
      }

      &.usbadge_warning-status {
        color: var(--badge-low-contrast-warning-text-color);
        background-color: var(--badge-low-contrast-warning-background-color);
        border-color: var(--badge-low-contrast-warning-border-color);
      }

      &.usbadge_success-status {
        color: var(--badge-low-contrast-success-text-color);
        background-color: var(--badge-low-contrast-success-background-color);
        border-color: var(--badge-low-contrast-success-border-color);
      }

      &.usbadge_secondary-status {
        color: var(--badge-low-contrast-secondary-text-color);
        background-color: var(--badge-low-contrast-secondary-background-color);
        border-color: var(--badge-low-contrast-secondary-border-color);
      }

      &.usbadge_primary-status {
        color: var(--badge-low-contrast-primary-text-color);
        background-color: var(--badge-low-contrast-primary-background-color);
        border-color: var(--badge-low-contrast-primary-border-color);
      }
    }

    &_moderate-contrast {
      &.usbadge_neutral-status {
        color: var(--badge-moderate-contrast-neutral-text-color);
        background-color: var(--badge-moderate-contrast-neutral-background-color);
        border-color: var(--badge-moderate-contrast-neutral-border-color);
      }

      &.usbadge_error-status {
        color: var(--badge-moderate-contrast-error-text-color);
        background-color: var(--badge-moderate-contrast-error-background-color);
        border-color: var(--badge-moderate-contrast-error-border-color);
      }

      &.usbadge_warning-status {
        color: var(--badge-moderate-contrast-warning-text-color);
        background-color: var(--badge-moderate-contrast-warning-background-color);
        border-color: var(--badge-moderate-contrast-warning-border-color);
      }

      &.usbadge_success-status {
        color: var(--badge-moderate-contrast-success-text-color);
        background-color: var(--badge-moderate-contrast-success-background-color);
        border-color: var(--badge-moderate-contrast-success-border-color);
      }

      &.usbadge_secondary-status {
        color: var(--badge-moderate-contrast-secondary-text-color);
        background-color: var(--badge-moderate-contrast-secondary-background-color);
        border-color: var(--badge-moderate-contrast-secondary-border-color);
      }

      &.usbadge_primary-status {
        color: var(--badge-moderate-contrast-primary-text-color);
        background-color: var(--badge-moderate-contrast-primary-background-color);
        border-color: var(--badge-moderate-contrast-primary-border-color);
      }
    }

    &_high-contrast {
      &.usbadge_neutral-status {
        color: var(--badge-high-contrast-neutral-text-color);
        background-color: var(--badge-high-contrast-neutral-background-color);
        border-color: var(--badge-high-contrast-neutral-border-color);
      }

      &.usbadge_error-status {
        color: var(--badge-high-contrast-error-text-color);
        background-color: var(--badge-high-contrast-error-background-color);
        border-color: var(--badge-high-contrast-error-border-color);
      }

      &.usbadge_warning-status {
        color: var(--badge-high-contrast-warning-text-color);
        background-color: var(--badge-high-contrast-warning-background-color);
        border-color: var(--badge-high-contrast-warning-border-color);

        slot[name=trailingIcon]::slotted(us-icon), .usbadge__icon {
          color: var(--color-neutral-0);
        }
      }

      &.usbadge_success-status {
        color: var(--badge-high-contrast-success-text-color);
        background-color: var(--badge-high-contrast-success-background-color);
        border-color: var(--badge-high-contrast-success-border-color);
      }

      &.usbadge_secondary-status {
        color: var(--badge-high-contrast-secondary-text-color);
        background-color: var(--badge-high-contrast-secondary-background-color);
        border-color: var(--badge-high-contrast-secondary-border-color);
      }

      &.usbadge_primary-status {
        color: var(--badge-high-contrast-primary-text-color);
        background-color: var(--badge-high-contrast-primary-background-color);
        border-color: var(--badge-high-contrast-primary-border-color);
      }
    }

    &_activator {
      display: flex;
    }

    &_tooltip{
      white-space: normal;
      width: 252px;
      &_icon{
        margin-left: var(--space-inline-xs);
      }
    }
  }
}