.badge{
  border-radius: var(--border-radius-round);
  color: var(--color-on-surface-alt-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-700);
  text-align: center;
  display: inline-block;
  vertical-align: top;
  height: 16px;
  min-width: 16px;
  line-height: 16px;
  background-color: var(--color-surface-brand-idle);
  &.danger{
    background-color: var(--color-surface-danger-idle);
  }
  &.neutral{
    background-color: var(--color-surface-alt-idle);
  }
  &.disabled{
    background-color: var(--color-surface-brand-disabled);
    &.danger{
      background-color: var(--color-surface-danger-disabled);
    }
    &.neutral{
      background-color: var(--color-surface-alt-disabled);
    }
  }
  &.small{
    height: 4px;
    width: 4px;
    min-width: 4px;
    span{
      display: none;
    }
  }
}