$pad-small: var(
  --wds-counter-badge-padding-horizontal-small,
  var(--wds-space-100, 6px)
);
$pad-medium: var(--wds-counter-badge-padding-horizontal-medium, 8px);
$pad-tiny: var(--wds-counter-badge-padding-horizontal-tiny, 4px);
$text-primary: var(
  --wds-color-text-standard-primary,
  var(--wsr-color-D10, #000624)
);
$text-secondary: var(
  --wds-color-text-standard-secondary,
  var(--wsr-color-D20, #333853)
);

.counter-badge {
  border-radius: var(
    --wds-counter-badge-border-radius-medium,
    var(--wds-border-radius-full, 18px)
  );
  color: var(
    --wds-color-text-standard-primary-light,
    var(--wsr-color-D80, #ffffff)
  );
  display: flex;
  width: fit-content;
  text-align: center;
  box-sizing: border-box;

  &__number-content {
    display: flex;
    align-items: center;
    gap: 1px;
  }

  &--size-small {
    height: 18px;
    min-width: 6px;
    padding: 0 $pad-small;
  }

  &--size-medium {
    height: 24px;
    min-width: 8px;
    padding: 0 $pad-medium;
  }

  &--size-tiny {
    height: var(--wds-counter-badge-size-tiny, var(--wds-space-350, 14px));
    min-width: var(--wds-counter-badge-size-tiny, var(--wds-space-350, 14px));
    padding: 0 $pad-tiny;
  }

  &--size-tiny#{&}#{&} #{&}__text {
    font-size: var(--wds-counter-badge-font-size-tiny, 10px);
    line-height: var(--wds-font-line-height-body-extra-tiny, 12px);
    font-weight: var(--wds-font-weight-semi-bold, 600);
  }

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

  &--type-solid#{&}--skin-general {
    background-color: var(
      --wds-color-fill-dark-primary,
      var(--wsr-color-D20, #333853)
    );
  }

  &--type-solid#{&}--skin-standard {
    background-color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B10, #116dff)
    );
  }

  &--type-solid#{&}--skin-neutral-standard {
    background-color: var(
      --wds-color-fill-standard-secondary,
      var(--wsr-color-B40, #d6e6fe)
    );
  }

  &--type-solid#{&}--skin-danger {
    background-color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R10, #e62214)
    );
  }

  &--type-solid#{&}--skin-warning {
    background-color: var(
      --wds-color-fill-warning-primary,
      var(--wsr-color-Y10, #ffb700)
    );
  }

  &--type-solid#{&}--skin-warning-light {
    background-color: var(
      --wds-color-yellow-400,
      var(--wsr-color-Y40, #ffe2a5)
    );
  }

  &--type-solid#{&}--skin-urgent {
    background-color: var(
      --wds-color-fill-urgent-primary,
      var(--wsr-color-O10, #fe620f)
    );
  }

  &--type-solid#{&}--skin-success {
    background-color: var(
      --wds-color-fill-success-primary,
      var(--wsr-color-G10, #25a55a)
    );
  }

  &--type-solid#{&}--skin-light {
    background-color: var(
      --wds-color-fill-dark-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &--type-solid#{&}--skin-neutral-light {
    background-color: var(
      --wds-color-fill-dark-secondary,
      var(--wsr-color-D70, #eceff3)
    );
  }

  &#{&}--skin-neutral-standard#{&} #{&}__text,
  &--skin-neutral-standard#{&} #{&}__caption {
    color: $text-primary;
  }

  &#{&}--skin-warning-light#{&} #{&}__text,
  &--skin-warning-light#{&} #{&}__caption {
    color: $text-secondary;
  }

  &#{&}--skin-light#{&} #{&}__text,
  &--skin-light#{&} #{&}__caption {
    color: $text-primary;
  }

  &#{&}--skin-neutral-light#{&} #{&}__text,
  &--skin-neutral-light#{&} #{&}__caption {
    color: $text-primary;
  }

  &--type-outlined {
    border: 1px solid;
    background-color: var(--wds-color-white, white);
  }

  &--type-outlined#{&}--skin-general {
    border-color: var(
      --wds-badge-outline-dark-border-color,
      var(--wds-color-border-dark-primary, var(--wsr-color-D20, #333853))
    );
    color: var(
      --wds-badge-outline-dark-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-outlined#{&}--skin-standard {
    border-color: var(
      --wds-badge-outline-standard-border-color,
      var(--wds-color-border-standard-primary, var(--wsr-color-B20, #5999ff))
    );
    color: var(
      --wds-badge-outline-standard-label-color,
      var(--wds-color-text-primary, var(--wsr-color-B20, #5999ff))
    );
  }

  &--type-outlined#{&}--skin-neutral-standard {
    border-color: var(
      --wds-color-border-standard-secondary,
      var(--wsr-color-B40, #d6e6fe)
    );
    color: $text-secondary;
  }

  &--type-outlined#{&}--skin-danger {
    border-color: var(
      --wds-counter-badge-outline-destructive-border-color,
      var(--wds-color-border-destructive-primary, var(--wsr-color-R10, #e62214))
    );
    color: var(
      --wds-badge-outline-destructive-label-color,
      var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214))
    );
  }

  &--type-outlined#{&}--skin-warning {
    border-color: var(
      --wds-badge-outline-warning-border-color,
      var(--wds-color-border-warning-primary, var(--wsr-color-Y10, #ffb700))
    );
    color: var(
      --wds-counter-badge-outline-warning-label-color,
      var(--wds-color-text-warning, var(--wsr-color-Y10, #ffb700))
    );
  }

  &--type-outlined#{&}--skin-warning-light {
    border-color: var(
      --wds-color-border-warning-secondary,
      var(--wsr-color-Y40, #ffe2a5)
    );
    color: $text-secondary;
  }

  &--type-outlined#{&}--skin-urgent {
    border-color: var(
      --wds-badge-outline-urgent-border-color,
      var(--wds-color-border-urgent-primary, var(--wsr-color-O10, #fe620f))
    );
    color: var(
      --wds-badge-outline-urgent-label-color,
      var(--wds-color-text-urgent, var(--wsr-color-O10, #fe620f))
    );
  }

  &--type-outlined#{&}--skin-success {
    border-color: var(
      --wds-badge-outline-success-border-color,
      var(--wds-color-border-success-primary, var(--wsr-color-G10, #25a55a))
    );
    color: var(
      --wds-badge-outline-success-label-color,
      var(--wds-color-text-success, var(--wsr-color-G10, #25a55a))
    );
  }

  &--type-outlined#{&}--skin-light {
    border-color: var(
      --wds-color-fill-dark-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
    color: $text-primary;
  }

  &--type-outlined#{&}--skin-neutral-light {
    border-color: var(
      --wds-color-border-dark-secondary,
      var(--wsr-color-D70, #eceff3)
    );
    color: $text-secondary;
  }

  &#{&}--type-outlined#{&} #{&}__text,
  &--type-outlined#{&} #{&}__caption {
    color: currentColor;
  }

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

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

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

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

  &__text,
  &__caption {
    margin: auto;
    /* stylelint-disable-next-line plugin/use-baseline */
    text-box: trim-both cap alphabetic;
  }

  &--size-small &__caption {
    min-width: 6px;
  }

  &--size-medium &__text {
    min-width: 8px;
  }

  &--custom {
    position: relative;
  }

  &--size-small#{&}--custom {
    height: 18px;
  }

  &--size-medium#{&}--custom {
    height: 24px;
  }

  &--custom svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &--size-small#{&}--custom svg {
    height: 12px;
    width: 12px;
  }

  &--size-medium#{&}--custom svg {
    height: 16px;
    width: 16px;
  }

  &--show-shadow {
    box-shadow: var(
      --wds-shadow-surface-raised,
      var(
        --wsr-shadow30,
        0 6px 6px 0 rgba(22, 45, 61, 0.06),
        0 0 18px 0 rgba(22, 45, 61, 0.12)
      )
    );
  }
}