.uss-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  line-height: 16px;
  font-size: 0.875rem;
  border-radius: var(--border-radius-full);
  font-weight: 500;
  white-space: nowrap;
  @include media-breakpoint-down($default-breakpoint) {
    padding: 0rem 0.5rem;
    line-height: 20px;
  }
  &--neutral {
    color: var(--text-strong);
    background-color: var(--neutral-30);
  }
  .dark &--neutral {
    background-color: var(--neutral-77);
  }
  &--info {
    color: var(--text-info);
    background-color: var(--surface-info);
  }
  &--success {
    color: var(--text-success);
    background-color: var(--surface-success);
  }
  &--warning {
    color: var(--text-warning);
    background-color: var(--surface-warning);
  }
  &--error {
    color: var(--text-error);
    background-color: var(--surface-error);
  }
  &--dot {
    height: 0.875rem;
    width: 0.875rem;
    padding: 0;
    background-color: var(--text-info);
  }
}