$pad-small: var(
  --wds-counter-badge-padding-horizontal-small,
  var(--wds-space-150, 6px)
);
$pad-medium: var(
  --wds-counter-badge-padding-horizontal-medium,
  var(--wds-space-200, 8px)
);

.counter-badge {
  &--size-small {
    padding: 0 $pad-small;
  }

  &--size-medium {
    padding: 0 $pad-medium;
  }

  &--size-medium#{&}--long-number {
    padding: 0 $pad-small 0 $pad-medium;
  }

  &--type-outlined#{&}--size-small {
    padding: 0 calc(#{$pad-small} - 1px);
  }

  &--type-outlined#{&}--size-medium {
    padding: 0 calc(#{$pad-medium} - 1px);
  }

  &--type-outlined#{&}--size-medium#{&}--long-number {
    padding: 0 calc(#{$pad-small} - 1px) 0 calc(#{$pad-medium} - 1px);
  }
}