badge.css

.ds-badge {
  --dsc-badge-background: var(--ds-color-accent-base-default);
  --dsc-badge-color: var(--ds-color-accent-contrast-default);
  --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
  --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));

  display: inline-flex;
  position: relative;

  &::before {
    content: attr(data-count);
    background: var(--dsc-badge-background);
    border-radius: var(--ds-border-radius-full);
    box-sizing: border-box;
    color: var(--dsc-badge-color);
    display: grid;
    min-height: var(--dsc-badge-size);
    min-width: var(--dsc-badge-size);
    padding: var(--dsc-badge-padding);
    place-items: center;
  }

  &[data-size='sm'] {
    --dsc-badge-size: var(--ds-sizing-3);
    --dsc-badge-padding: 0 var(--ds-spacing-1);

    &[data-count] {
      --dsc-badge-size: var(--ds-sizing-5);
    }
  }

  &[data-size='lg'] {
    --dsc-badge-size: var(--ds-sizing-4);
    --dsc-badge-padding: 0 var(--ds-spacing-2);

    &[data-count] {
      --dsc-badge-size: var(--ds-sizing-7);
    }
  }

  &[data-color='info'] {
    --dsc-badge-background: var(--ds-color-info-base-default);
    --dsc-badge-color: var(--ds-color-info-contrast-default);
  }

  &[data-color='success'] {
    --dsc-badge-background: var(--ds-color-success-base-default);
    --dsc-badge-color: var(--ds-color-success-contrast-default);
  }

  &[data-color='warning'] {
    --dsc-badge-background: var(--ds-color-warning-base-default);
    --dsc-badge-color: var(--ds-color-warning-contrast-default);
  }

  &[data-color='danger'] {
    --dsc-badge-background: var(--ds-color-danger-base-default);
    --dsc-badge-color: var(--ds-color-danger-contrast-default);
  }

  &[data-color='neutral'] {
    --dsc-badge-background: var(--ds-color-neutral-surface-default);
    --dsc-badge-color: var(--ds-color-neutral-text-default);
  }

  /* If placement is present, we are floating */
  &[data-placement]::before {
    position: absolute;
  }

  &[data-placement='top-right']::before {
    top: 0;
    right: 0;
    translate: 50% -50%;
  }

  &[data-placement='top-left']::before {
    top: 0;
    left: 0;
    translate: -50% -50%;
  }

  &[data-placement='bottom-right']::before {
    bottom: 0;
    right: 0;
    translate: 50% 50%;
  }

  &[data-placement='bottom-left']::before {
    bottom: 0;
    left: 0;
    translate: -50% 50%;
  }

  &[data-placement='top-right'][data-overlap='circle']::before {
    top: 14%;
    right: 14%;
    translate: 50% -50%;
  }

  &[data-placement='top-left'][data-overlap='circle']::before {
    top: 14%;
    left: 14%;
    translate: -50% -50%;
  }

  &[data-placement='bottom-right'][data-overlap='circle']::before {
    bottom: 14%;
    right: 14%;
    translate: 50% 50%;
  }

  &[data-placement='bottom-left'][data-overlap='circle']::before {
    bottom: 14%;
    left: 14%;
    translate: -50% 50%;
  }
}