$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#{&}--skin-general {
    border-color: var(
      --wds-badge-outline-dark-border-color,
      var(--wds-color-black-100, #151414)
    );
  }

  &--type-outlined#{&}--skin-standard {
    border-color: var(
      --wds-badge-outline-standard-border-color,
      var(--wds-color-blue-200, #597dff)
    );
    color: var(
      --wds-badge-outline-standard-label-color,
      var(--wds-color-blue-50, #1c3fe5)
    );
  }

  &--type-outlined#{&}--skin-danger {
    border-color: var(
      --wds-counter-badge-outline-destructive-border-color,
      var(--wds-color-red-200, #e55c5e)
    );
    color: var(
      --wds-badge-outline-destructive-label-color,
      var(--wds-color-red-50, #be2b2e)
    );
  }

  &--type-outlined#{&}--skin-warning {
    border-color: var(
      --wds-badge-outline-warning-border-color,
      var(--wds-color-yellow-0, #9f6113)
    );
    color: var(
      --wds-counter-badge-outline-warning-label-color,
      var(--wds-color-yellow-0, #9f6113)
    );
  }

  &--type-outlined#{&}--skin-urgent {
    border-color: var(
      --wds-badge-outline-urgent-border-color,
      var(--wds-color-orange-50, #d96d3a)
    );
    color: var(
      --wds-badge-outline-urgent-label-color,
      var(--wds-color-orange-0, #ae3e09)
    );
  }

  &--type-outlined#{&}--skin-success {
    border-color: var(
      --wds-badge-outline-success-border-color,
      var(--wds-color-green-100, #4b916d)
    );
    color: var(
      --wds-badge-outline-success-label-color,
      var(--wds-color-green-50, #3f7b5c)
    );
  }

  &--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);
  }
}