.badge {
  color: var(--color-text-primary);
  font-size: 13px;
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  gap: 4px;
  border-radius: 8px;
  align-items: center;

  > svg {
    flex-shrink: 0;
    width: auto;
    height: 17px;
    fill: currentColor;
    opacity: 0.85;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  &:not(.badgeWithoutIcon) {
    padding-inline-end: 8px;
  }
}

.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.domain {
  opacity: 0.75;
  letter-spacing: 0;
}

.default {
  background-color: var(--color-bg-secondary);
}

.subtle {
  background-color: var(--color-bg-brand-softest);
}

.feature {
  background-color: var(--color-bg-brand-base);
  color: var(--color-text-on-brand-base);
}

.inverted {
  background-color: var(--color-bg-inverted);
  color: var(--color-text-inverted);
}

.success {
  background-color: var(--color-bg-success-softest);
}

.warning {
  background-color: var(--color-bg-warning-softest);
  color: var(--color-text-warning);
}

.danger {
  background-color: var(--color-bg-error-base);
  color: var(--color-text-on-error-base);
}