:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  display: inline-flex;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sl-font-size-x-small);
  font-weight: var(--sl-font-weight-semibold);
  letter-spacing: var(--sl-letter-spacing-normal);
  line-height: 1rem;
  border-radius: var(--sl-border-radius-small);
  white-space: nowrap;
  padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
  user-select: none;
  cursor: inherit;
}

.badge__label {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
}

.badge--primary {
  background-color: var(--sl-badge-background-color-primary);
  color: var(--sl-badge-font-color-primary);
  border: 1px solid var(--sl-badge-border-color-primary);
}

.badge--success {
  background-color: var(--sl-badge-background-color-success);
  color: var(--sl-badge-font-color-success);
  border: 1px solid var(--sl-badge-border-color-success);
}

.badge--info {
  background-color: var(--sl-badge-background-color-info);
  color: var(--sl-badge-font-color-info);
  border: 1px solid var(--sl-badge-border-color-info);
}

.badge--warning {
  background-color: var(--sl-badge-background-color-warning);
  color: var(--sl-badge-font-color-warning);
  border: 1px solid var(--sl-badge-border-color-warning);
}

.badge--danger {
  background-color: var(--sl-badge-background-color-danger);
  color: var(--sl-badge-font-color-danger);
  border: 1px solid var(--sl-badge-border-color-danger);
}

.badge--pill {
  border-radius: var(--sl-border-radius-pill);
}

.badge--pulse {
  animation: pulse 1.5s infinite;
}

.badge--pulse.badge--primary {
  --pulse-color: var(--sl-color-blue-500);
}

.badge--pulse.badge--success {
  --pulse-color: var(--sl-color-green-500);
}

.badge--pulse.badge--info {
  --pulse-color: var(--sl-color-gray-500);
}

.badge--pulse.badge--warning {
  --pulse-color: var(--sl-color-yellow-500);
}

.badge--pulse.badge--danger {
  --pulse-color: var(--sl-color-red-500);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color);
  }
  70% {
    box-shadow: 0 0 0 0.5rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.badge--has-suffix .badge__suffix {
  margin-left: var(--sl-spacing-x-small);
  line-height: initial;
  display: flex;
}

.badge__suffix ::slotted(*) {
  margin-top: auto;
  margin-bottom: auto;
}