.badge {
  border: 1px solid;
  border-radius: var(
    --wds-badge-border-radius-medium,
    var(--wds-border-radius-100, 2px)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;

  &--display-block {
    display: block flex;
  }

  &:where(:focus) {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &__prefix,
  &__suffix {
    fill: currentColor;
    flex-shrink: 0;
  }

  &#{&} &__text {
    color: currentColor;
  }

  & > :not(:last-child) {
    margin-inline-end: var(--wds-space-100, 6px);
  }

  &--uppercase &__text {
    text-transform: uppercase;
  }

  &--type-transparent#{&}--skin-general {
    border-color: transparent;
    color: var(
      --wds-color-text-standard-secondary,
      var(--wsr-color-D20, #333853)
    );
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-general &__text {
    color: var(
      --wds-color-text-standard-secondary,
      var(--wsr-color-D20, #333853)
    );
  }

  &--type-transparent#{&}--skin-standard {
    border-color: transparent;
    color: var(--wds-color-text-primary, var(--wsr-color-B20, #5999ff));
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-standard &__text {
    color: var(--wds-color-text-primary, var(--wsr-color-B20, #5999ff));
  }

  &--type-transparent#{&}--skin-danger {
    border-color: transparent;
    color: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-danger &__text {
    color: var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214));
  }

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

  &#{&}--type-transparent#{&}--skin-success &__text {
    color: var(
      --wds-badge-transparent-success-label-color,
      var(--wds-color-text-success, var(--wsr-color-G10, #25a55a))
    );
  }

  &--type-transparent#{&}--skin-neutral {
    border-color: transparent;
    color: var(
      --wds-badge-transparent-neutral-label-color,
      var(
        --wds-color-text-standard-secondary-light,
        var(--wsr-color-D40, #868aa5)
      )
    );
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-neutral &__text {
    color: var(
      --wds-badge-transparent-neutral-label-color,
      var(
        --wds-color-text-standard-secondary-light,
        var(--wsr-color-D40, #868aa5)
      )
    );
  }

  &--type-transparent#{&}--skin-warning {
    border-color: transparent;
    color: var(
      --wds-badge-transparent-warning-label-color,
      var(--wds-color-text-warning, var(--wsr-color-Y10, #ffb700))
    );
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-warning &__text {
    color: var(
      --wds-badge-transparent-warning-label-color,
      var(--wds-color-text-warning, var(--wsr-color-Y10, #ffb700))
    );
  }

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

  &#{&}--type-transparent#{&}--skin-urgent &__text {
    color: var(
      --wds-badge-transparent-urgent-label-color,
      var(--wds-color-text-urgent, var(--wsr-color-O10, #fe620f))
    );
  }

  &--type-transparent#{&}--skin-neutral-standard {
    border-color: transparent;
    color: var(
      --wds-badge-transparent-neutral-standard-label-color,
      var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe))
    );
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-neutral-standard &__text {
    color: var(
      --wds-badge-transparent-neutral-standard-label-color,
      var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe))
    );
  }

  &--type-transparent#{&}--skin-neutral-success {
    border-color: transparent;
    color: var(
      --wds-badge-transparent-neutral-success-label-color,
      var(--wds-color-green-400, var(--wsr-color-G40, #c8e8d6))
    );
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-neutral-success &__text {
    color: var(
      --wds-badge-transparent-neutral-success-label-color,
      var(--wds-color-green-400, var(--wsr-color-G40, #c8e8d6))
    );
  }

  &--type-transparent#{&}--skin-neutral-danger {
    border-color: transparent;
    color: var(
      --wds-badge-transparent-neutral-danger-label-color,
      var(--wds-color-red-400, var(--wsr-color-R40, #fbd0cd))
    );
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-neutral-danger &__text {
    color: var(
      --wds-badge-transparent-neutral-danger-label-color,
      var(--wds-color-red-400, var(--wsr-color-R40, #fbd0cd))
    );
  }

  &--type-transparent#{&}--skin-premium {
    border-color: transparent;
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9a27d5));
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-premium &__text {
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9a27d5));
  }

  &--type-transparent#{&}--skin-neutral-light {
    border-color: transparent;
    color: var(
      --wds-badge-transparent-neutral-light-label-color,
      var(--wds-color-black-700, var(--wsr-color-D70, #eceff3))
    );
    background: transparent;
  }

  &#{&}--type-transparent#{&}--skin-neutral-light &__text {
    color: var(
      --wds-badge-transparent-neutral-light-label-color,
      var(--wds-color-black-700, var(--wsr-color-D70, #eceff3))
    );
  }

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

  &#{&}--type-transparent#{&}--skin-warning-light &__text {
    color: var(
      --wds-badge-transparent-warning-light-label-color,
      var(--wds-color-yellow-400, var(--wsr-color-Y40, #ffe2a5))
    );
  }

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

  &#{&}--type-solid#{&}--skin-general &__text {
    color: var(--wds-color-text-standard-primary-light, white);
  }

  &--type-solid#{&}--skin-standard {
    border-color: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B20, #5999ff)
    );
    color: var(--wds-color-text-standard-primary-light, white);
    background: var(
      --wds-color-fill-standard-primary,
      var(--wsr-color-B20, #5999ff)
    );
  }

  &#{&}--type-solid#{&}--skin-standard &__text {
    color: var(--wds-color-text-standard-primary-light, white);
  }

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

  &#{&}--type-solid#{&}--skin-danger &__text {
    color: var(--wds-color-text-standard-primary-light, white);
  }

  &--type-solid#{&}--skin-success {
    border-color: var(
      --wds-badge-solid-success-fill,
      var(--wds-color-fill-success-primary, var(--wsr-color-G10, #25a55a))
    );
    color: var(
      --wds-badge-solid-success-label-color,
      var(--wds-color-text-standard-primary-light, white)
    );
    background: var(
      --wds-badge-solid-success-fill,
      var(--wds-color-fill-success-primary, var(--wsr-color-G10, #25a55a))
    );
  }

  &#{&}--type-solid#{&}--skin-success &__text {
    color: var(
      --wds-badge-solid-success-label-color,
      var(--wds-color-text-standard-primary-light, white)
    );
  }

  &--type-solid#{&}--skin-neutral {
    border-color: var(--wds-color-black-400, var(--wsr-color-D40, #868aa5));
    color: var(--wds-color-text-standard-primary-light, white);
    background: var(--wds-color-black-400, var(--wsr-color-D40, #868aa5));
  }

  &#{&}--type-solid#{&}--skin-neutral &__text {
    color: var(--wds-color-text-standard-primary-light, white);
  }

  &--type-solid#{&}--skin-warning {
    border-color: var(
      --wds-color-fill-warning-primary,
      var(--wsr-color-Y10, #ffb700)
    );
    color: var(
      --wds-badge-solid-warning-label-color,
      var(--wds-color-text-standard-primary-light, white)
    );
    background: var(
      --wds-color-fill-warning-primary,
      var(--wsr-color-Y10, #ffb700)
    );
  }

  &#{&}--type-solid#{&}--skin-warning &__text {
    color: var(
      --wds-badge-solid-warning-label-color,
      var(--wds-color-text-standard-primary-light, white)
    );
  }

  &--type-solid#{&}--skin-urgent {
    border-color: var(
      --wds-color-fill-urgent-primary,
      var(--wsr-color-O10, #fe620f)
    );
    color: var(
      --wds-badge-solid-urgent-label-color,
      var(--wds-color-text-standard-primary-light, white)
    );
    background: var(
      --wds-color-fill-urgent-primary,
      var(--wsr-color-O10, #fe620f)
    );
  }

  &#{&}--type-solid#{&}--skin-urgent &__text {
    color: var(
      --wds-badge-solid-urgent-label-color,
      var(--wds-color-text-standard-primary-light, white)
    );
  }

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

  &#{&}--type-solid#{&}--skin-neutral-standard &__text {
    color: var(
      --wds-badge-solid-neutral-standard-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-solid#{&}--skin-neutral-success {
    border-color: var(
      --wds-badge-solid-neutral-success-fill,
      var(--wds-color-fill-success-secondary, var(--wsr-color-G40, #c8e8d6))
    );
    color: var(
      --wds-badge-solid-neutral-success-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(
      --wds-badge-solid-neutral-success-fill,
      var(--wds-color-fill-success-secondary, var(--wsr-color-G40, #c8e8d6))
    );
  }

  &#{&}--type-solid#{&}--skin-neutral-success &__text {
    color: var(
      --wds-badge-solid-neutral-success-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-solid#{&}--skin-neutral-danger {
    border-color: var(
      --wds-badge-solid-neutral-danger-fill,
      var(--wds-color-fill-destructive-secondary, var(--wsr-color-R40, #fbd0cd))
    );
    color: var(
      --wds-badge-solid-neutral-danger-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(
      --wds-badge-solid-neutral-danger-fill,
      var(--wds-color-fill-destructive-secondary, var(--wsr-color-R40, #fbd0cd))
    );
  }

  &#{&}--type-solid#{&}--skin-neutral-danger &__text {
    color: var(
      --wds-badge-solid-neutral-danger-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-solid#{&}--skin-premium {
    border-color: var(
      --wds-color-fill-premium-primary,
      var(--wsr-color-P10, #9a27d5)
    );
    color: var(--wds-color-text-standard-primary-light, white);
    background: var(
      --wds-color-fill-premium-primary,
      var(--wsr-color-P10, #9a27d5)
    );
  }

  &#{&}--type-solid#{&}--skin-premium &__text {
    color: var(--wds-color-text-standard-primary-light, white);
  }

  &--type-solid#{&}--skin-neutral-light {
    border-color: var(
      --wds-color-fill-dark-secondary,
      var(--wsr-color-D70, #eceff3)
    );
    color: var(
      --wds-badge-solid-neutral-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(
      --wds-color-fill-dark-secondary,
      var(--wsr-color-D70, #eceff3)
    );
  }

  &#{&}--type-solid#{&}--skin-neutral-light &__text {
    color: var(
      --wds-badge-solid-neutral-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-solid#{&}--skin-warning-light {
    border-color: var(
      --wds-badge-solid-warning-light-fill,
      var(--wds-color-fill-warning-secondary, var(--wsr-color-Y40, #ffe2a5))
    );
    color: var(
      --wds-badge-solid-warning-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(
      --wds-badge-solid-warning-light-fill,
      var(--wds-color-fill-warning-secondary, var(--wsr-color-Y40, #ffe2a5))
    );
  }

  &#{&}--type-solid#{&}--skin-warning-light &__text {
    color: var(
      --wds-badge-solid-warning-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-outlined#{&}--skin-general {
    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))
    );
    background: var(
      --wds-badge-outline-dark-fill,
      var(--wds-color-fill-dark-tertiary, white)
    );
  }

  &#{&}--type-outlined#{&}--skin-general &__text {
    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))
    );
    background: var(
      --wds-badge-outline-standard-fill,
      var(--wds-color-fill-standard-tertiary, white)
    );
  }

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

  &--type-outlined#{&}--skin-danger {
    border-color: var(
      --wds-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))
    );
    background: var(
      --wds-badge-outline-destructive-fill,
      var(--wds-color-fill-destructive-tertiary, white)
    );
  }

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

  &--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))
    );
    background: var(
      --wds-badge-outline-success-fill,
      var(--wds-color-fill-success-tertiary, white)
    );
  }

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

  &--type-outlined#{&}--skin-neutral {
    border-color: var(
      --wds-badge-outline-neutral-border-color,
      var(--wds-color-border-dark-primary, var(--wsr-color-D40, #868aa5))
    );
    color: var(
      --wds-badge-outline-neutral-label-color,
      var(
        --wds-color-text-standard-secondary-light,
        var(--wsr-color-D40, #868aa5)
      )
    );
    background: var(
      --wds-badge-outline-neutral-fill,
      var(--wds-color-fill-dark-tertiary, white)
    );
  }

  &#{&}--type-outlined#{&}--skin-neutral &__text {
    color: var(
      --wds-badge-outline-neutral-label-color,
      var(
        --wds-color-text-standard-secondary-light,
        var(--wsr-color-D40, #868aa5)
      )
    );
  }

  &--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-badge-outline-warning-label-color,
      var(--wds-color-text-warning, var(--wsr-color-Y10, #ffb700))
    );
    background: var(
      --wds-badge-outline-warning-fill,
      var(--wds-color-fill-warning-tertiary, white)
    );
  }

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

  &--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))
    );
    background: var(
      --wds-badge-outline-urgent-fill,
      var(--wds-color-fill-urgent-tertiary, white)
    );
  }

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

  &--type-outlined#{&}--skin-neutral-standard {
    border-color: var(
      --wds-badge-outline-neutral-standard-border-color,
      var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe))
    );
    color: var(
      --wds-badge-outline-neutral-standard-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(--wds-color-fill-standard-tertiary, white);
  }

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

  &--type-outlined#{&}--skin-neutral-success {
    border-color: var(
      --wds-badge-outline-neutral-success-border-color,
      var(--wds-color-border-success-secondary, var(--wsr-color-G40, #c8e8d6))
    );
    color: var(
      --wds-badge-outline-neutral-success-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(--wds-color-fill-success-tertiary, white);
  }

  &#{&}--type-outlined#{&}--skin-neutral-success &__text {
    color: var(
      --wds-badge-outline-neutral-success-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-outlined#{&}--skin-neutral-danger {
    border-color: var(
      --wds-badge-outline-neutral-danger-border-color,
      var(
        --wds-color-border-destructive-secondary,
        var(--wsr-color-R40, #fbd0cd)
      )
    );
    color: var(
      --wds-badge-outline-neutral-danger-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(--wds-color-fill-destructive-tertiary, white);
  }

  &#{&}--type-outlined#{&}--skin-neutral-danger &__text {
    color: var(
      --wds-badge-outline-neutral-danger-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-outlined#{&}--skin-premium {
    border-color: var(
      --wds-badge-outline-premium-border-color,
      var(--wds-color-border-premium-primary, var(--wsr-color-P10, #9a27d5))
    );
    color: var(
      --wds-badge-outline-premium-label-color,
      var(--wds-color-text-premium, var(--wsr-color-P10, #9a27d5))
    );
    background: var(
      --wds-badge-outline-premium-fill,
      var(--wds-color-fill-premium-tertiary, white)
    );
  }

  &#{&}--type-outlined#{&}--skin-premium &__text {
    color: var(
      --wds-badge-outline-premium-label-color,
      var(--wds-color-text-premium, var(--wsr-color-P10, #9a27d5))
    );
  }

  &--type-outlined#{&}--skin-neutral-light {
    border-color: var(
      --wds-badge-outline-neutral-light-border-color,
      var(--wds-color-border-dark-secondary, var(--wsr-color-D70, #eceff3))
    );
    color: var(
      --wds-badge-outline-neutral-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(--wds-color-fill-dark-tertiary, white);
  }

  &#{&}--type-outlined#{&}--skin-neutral-light &__text {
    color: var(
      --wds-badge-outline-neutral-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--type-outlined#{&}--skin-warning-light {
    border-color: var(
      --wds-badge-outline-warning-light-border-color,
      var(--wds-color-border-warning-secondary, var(--wsr-color-Y40, #ffe2a5))
    );
    color: var(
      --wds-badge-outline-warning-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
    background: var(--wds-color-white, white);
  }

  &#{&}--type-outlined#{&}--skin-warning-light &__text {
    color: var(
      --wds-badge-outline-warning-light-label-color,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
    );
  }

  &--size-medium {
    padding: var(--wds-badge-padding-vertical-medium, var(--wds-space-50, 0px))
      var(--wds-badge-padding-horizontal-medium, var(--wds-space-200, 12px));
    height: var(--wds-badge-size-medium, var(--wds-space-400, 24px));
  }

  &--no-padding#{&}--size-medium {
    padding: 0;
  }

  &--size-small {
    padding: var(--wds-badge-padding-vertical-small, var(--wds-space-0, 0px))
      var(--wds-badge-padding-horizontal-small, var(--wds-space-100, 6px));
    height: var(--wds-badge-size-small, var(--wds-space-300, 18px));
  }

  &#{&}#{&}--size-small &__text {
    font-size: var(
      --wds-badge-label-font-size-small,
      var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px))
    );
    line-height: var(
      --wds-badge-label-font-line-height-small,
      var(
        --wds-font-line-height-body-small,
        var(--wsr-text-line-height-small, 18px)
      )
    );
  }

  &--no-padding#{&}--size-small {
    padding: 0;
  }

  &--size-tiny {
    padding: var(--wds-badge-padding-vertical-tiny, var(--wds-space-0, 0px))
      var(--wds-badge-padding-horizontal-tiny, var(--wds-space-100, 5.5px));
    height: var(--wds-badge-size-tiny, var(--wds-space-300, 18px));
  }

  &--no-padding#{&}--size-tiny {
    padding: 0;
  }

  &--clickable {
    cursor: pointer;
  }
}