[sbb-badge] {
  --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
  position: relative;
}
[sbb-badge]::after {
  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-text);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-size: var(--sbb-text-font-size);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sbb-spacing-fixed-1x);
  border-radius: var(--sbb-border-radius-infinity);
  background-color: var(--sbb-color-primary);
  color: var(--sbb-color-1-negative);
  min-width: var(--sbb-spacing-fixed-4x);
  max-height: var(--sbb-spacing-fixed-4x);
  outline: var(--sbb-border-width-1x) solid transparent;
  content: attr(sbb-badge);
  position: absolute;
  inset-block-start: var(--sbb-badge-position-offset);
}
[sbb-badge]:where([sbb-badge-position=before])::after {
  inset-inline-start: var(--sbb-badge-position-offset);
}
[sbb-badge]:where(:not([sbb-badge-position]), [sbb-badge-position=after])::after {
  inset-inline-end: var(--sbb-badge-position-offset);
}