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-height: var(--ds-sizing-6);
  --dsc-badge-width: 14px;

  background-color: var(--dsc-badge-background);
  color: var(--dsc-badge-color);
  border-radius: var(--ds-border-radius-full);
  display: grid;
  place-items: center;
  padding: var(--dsc-badge-padding);
  height: var(--dsc-badge-height);
  width: var(--dsc-badge-width);
}

.ds-badge__wrapper {
  display: inline-flex;
  position: relative;
  width: fit-content;
  height: fit-content;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.ds-badge--float {
  transform-origin: center;
  position: absolute;
}

.ds-badge--float.ds-badge--top-right__rectangle {
  top: 0;
  right: 0;
  transform: translateX(50%) translateY(-50%);
}

.ds-badge--float.ds-badge--top-left__rectangle {
  top: 0;
  left: 0;
  transform: translateX(-50%) translateY(-50%);
}

.ds-badge--float.ds-badge--bottom-right__rectangle {
  bottom: 0;
  right: 0;
  transform: translateX(50%) translateY(50%);
}

.ds-badge--float.ds-badge--bottom-left__rectangle {
  bottom: 0;
  left: 0;
  transform: translateX(-50%) translateY(50%);
}

.ds-badge--float.ds-badge--top-right__circle {
  top: 14%;
  right: 14%;
  transform: translateX(50%) translateY(-50%);
}

.ds-badge--float.ds-badge--top-left__circle {
  top: 14%;
  left: 14%;
  transform: translateX(-50%) translateY(-50%);
}

.ds-badge--float.ds-badge--bottom-right__circle {
  bottom: 14%;
  right: 14%;
  transform: translateX(50%) translateY(50%);
}

.ds-badge--float.ds-badge--bottom-left__circle {
  bottom: 14%;
  left: 14%;
  transform: translateX(-50%) translateY(50%);
}

.ds-bade--accent {
  --dsc-badge-background: var(--ds-color-accent-base-default);
  --dsc-badge-color: var(--ds-color-accent-contrast-default);
}

.ds-badge--info {
  --dsc-badge-background: var(--ds-color-info-base-default);
  --dsc-badge-color: var(--ds-color-info-contrast-default);
}

.ds-badge--success {
  --dsc-badge-background: var(--ds-color-success-base-default);
  --dsc-badge-color: var(--ds-color-success-contrast-default);
}

.ds-badge--warning {
  --dsc-badge-background: var(--ds-color-warning-base-default);
  --dsc-badge-color: var(--ds-color-warning-contrast-default);
}

.ds-badge--danger {
  --dsc-badge-background: var(--ds-color-danger-base-default);
  --dsc-badge-color: var(--ds-color-danger-contrast-default);
}

.ds-badge--neutral {
  --dsc-badge-background: var(--ds-color-neutral-surface-default);
  --dsc-badge-color: var(--ds-color-neutral-text-default);
}

.ds-badge--sm {
  --dsc-badge-height: var(--ds-sizing-3);
  --dsc-badge-width: var(--ds-sizing-3);

  &.ds-badge--count {
    --dsc-badge-height: var(--ds-sizing-5);
    --dsc-badge-width: auto;
    --dsc-badge-padding: 0 var(--ds-spacing-1);
  }
}

.ds-badge--md {
  --dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
  --dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));

  &.ds-badge--count {
    --dsc-badge-height: var(--ds-sizing-6);
    --dsc-badge-width: auto;
    --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
  }
}

.ds-badge--lg {
  --dsc-badge-height: var(--ds-sizing-4);
  --dsc-badge-width: var(--ds-sizing-4);

  &.ds-badge--count {
    --dsc-badge-height: var(--ds-sizing-7);
    --dsc-badge-width: auto;
    --dsc-badge-padding: 0 var(--ds-spacing-2);
  }
}

.ds-badge--count {
  --dsc-badge-height: auto;
  --dsc-badge-width: auto;
}