.badge {
  border-radius: var(
    --wds-badge-border-radius-medium,
    var(--wds-border-radius-300)
  );

  &--type-transparent#{&}--skin-success {
    color: var(
      --wds-badge-transparent-success-label-color,
      var(--wds-color-green-50)
    );
  }

  &#{&}--type-transparent#{&}--skin-success &__text {
    color: var(
      --wds-badge-transparent-success-label-color,
      var(--wds-color-green-50)
    );
  }

  &--type-transparent#{&}--skin-neutral {
    color: var(
      --wds-badge-transparent-neutral-label-color,
      var(--wds-color-black-300)
    );
  }

  &#{&}--type-transparent#{&}--skin-neutral &__text {
    color: var(
      --wds-badge-transparent-neutral-label-color,
      var(--wds-color-black-300)
    );
  }

  &--type-transparent#{&}--skin-warning {
    color: var(
      --wds-badge-transparent-warning-label-color,
      var(--wds-color-yellow-0)
    );
  }

  &#{&}--type-transparent#{&}--skin-warning &__text {
    color: var(
      --wds-badge-transparent-warning-label-color,
      var(--wds-color-yellow-0)
    );
  }

  &--type-transparent#{&}--skin-urgent {
    color: var(
      --wds-badge-transparent-urgent-label-color,
      var(--wds-color-orange-0)
    );
  }

  &#{&}--type-transparent#{&}--skin-urgent &__text {
    color: var(
      --wds-badge-transparent-urgent-label-color,
      var(--wds-color-orange-0)
    );
  }

  &--type-transparent#{&}--skin-neutral-standard {
    color: var(
      --wds-badge-transparent-neutral-standard-label-color,
      var(--wds-color-text-primary)
    );
  }

  &#{&}--type-transparent#{&}--skin-neutral-standard &__text {
    color: var(
      --wds-badge-transparent-neutral-standard-label-color,
      var(--wds-color-text-primary)
    );
  }

  &--type-transparent#{&}--skin-neutral-success {
    color: var(
      --wds-badge-transparent-neutral-success-label-color,
      var(--wds-color-green-50)
    );
  }

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

  &--type-transparent#{&}--skin-neutral-danger {
    color: var(
      --wds-badge-transparent-neutral-danger-label-color,
      var(--wds-color-text-destructive)
    );
  }

  &#{&}--type-transparent#{&}--skin-neutral-danger &__text {
    color: var(
      --wds-badge-transparent-neutral-danger-label-color,
      var(--wds-color-text-destructive)
    );
  }

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

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

  &--type-transparent#{&}--skin-warning-light {
    color: var(
      --wds-badge-transparent-warning-light-label-color,
      var(--wds-color-yellow-0)
    );
  }

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

  &--type-solid#{&}--skin-success {
    border-color: var(
      --wds-badge-solid-success-fill,
      var(--wds-color-green-300)
    );
    color: var(
      --wds-badge-solid-success-label-color,
      var(--wds-color-text-standard-primary)
    );
    background: var(--wds-badge-solid-success-fill, var(--wds-color-green-300));
  }

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

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

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

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

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

  &--type-solid#{&}--skin-neutral-standard {
    border-color: var(
      --wds-badge-solid-neutral-standard-fill,
      var(--wds-color-blue-500)
    );
    color: var(
      --wds-badge-solid-neutral-standard-label-color,
      var(--wds-color-blue-50)
    );
    background: var(
      --wds-badge-solid-neutral-standard-fill,
      var(--wds-color-blue-500)
    );
  }

  &#{&}--type-solid#{&}--skin-neutral-standard &__text {
    color: var(
      --wds-badge-solid-neutral-standard-label-color,
      var(--wds-color-blue-50)
    );
  }

  &--type-solid#{&}--skin-neutral-success {
    border-color: var(
      --wds-badge-solid-neutral-success-fill,
      var(--wds-color-green-600)
    );
    color: var(
      --wds-badge-solid-neutral-success-label-color,
      var(--wds-color-green-50)
    );
    background: var(
      --wds-badge-solid-neutral-success-fill,
      var(--wds-color-green-600)
    );
  }

  &#{&}--type-solid#{&}--skin-neutral-success &__text {
    color: var(
      --wds-badge-solid-neutral-success-label-color,
      var(--wds-color-green-50)
    );
  }

  &--type-solid#{&}--skin-neutral-danger {
    border-color: var(
      --wds-badge-solid-neutral-danger-fill,
      var(--wds-color-red-600)
    );
    color: var(
      --wds-badge-solid-neutral-danger-label-color,
      var(--wds-color-red-50)
    );
    background: var(
      --wds-badge-solid-neutral-danger-fill,
      var(--wds-color-red-600)
    );
  }

  &#{&}--type-solid#{&}--skin-neutral-danger &__text {
    color: var(
      --wds-badge-solid-neutral-danger-label-color,
      var(--wds-color-red-50)
    );
  }

  &--type-solid#{&}--skin-neutral-light {
    color: var(
      --wds-badge-solid-neutral-light-label-color,
      var(--wds-color-black-300)
    );
  }

  &#{&}--type-solid#{&}--skin-neutral-light &__text {
    color: var(
      --wds-badge-solid-neutral-light-label-color,
      var(--wds-color-black-300)
    );
  }

  &--type-solid#{&}--skin-warning-light {
    border-color: var(
      --wds-badge-solid-warning-light-fill,
      var(--wds-color-yellow-500)
    );
    color: var(
      --wds-badge-solid-warning-light-label-color,
      var(--wds-color-yellow-0)
    );
    background: var(
      --wds-badge-solid-warning-light-fill,
      var(--wds-color-yellow-500)
    );
  }

  &#{&}--type-solid#{&}--skin-warning-light &__text {
    color: var(
      --wds-badge-solid-warning-light-label-color,
      var(--wds-color-yellow-0)
    );
  }

  &--type-outlined#{&}--skin-general {
    background: var(
      --wds-badge-outline-dark-fill,
      var(--wds-color-fill-dark-secondary)
    );
  }

  &--type-outlined#{&}--skin-standard {
    border-color: var(
      --wds-badge-outline-standard-border-color,
      var(--wds-color-blue-200)
    );
    color: var(
      --wds-badge-outline-standard-label-color,
      var(--wds-color-blue-50)
    );
    background: var(
      --wds-badge-outline-standard-fill,
      var(--wds-color-blue-500)
    );
  }

  &#{&}--type-outlined#{&}--skin-standard &__text {
    color: var(
      --wds-badge-outline-standard-label-color,
      var(--wds-color-blue-50)
    );
  }

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

  &#{&}--type-outlined#{&}--skin-danger &__text {
    color: var(
      --wds-badge-outline-destructive-label-color,
      var(--wds-color-red-50)
    );
  }

  &--type-outlined#{&}--skin-success {
    border-color: var(
      --wds-badge-outline-success-border-color,
      var(--wds-color-green-100)
    );
    color: var(
      --wds-badge-outline-success-label-color,
      var(--wds-color-green-50)
    );
    background: var(
      --wds-badge-outline-success-fill,
      var(--wds-color-green-600)
    );
  }

  &#{&}--type-outlined#{&}--skin-success &__text {
    color: var(
      --wds-badge-outline-success-label-color,
      var(--wds-color-green-50)
    );
  }

  &--type-outlined#{&}--skin-neutral {
    color: var(
      --wds-badge-outline-neutral-label-color,
      var(--wds-color-black-300)
    );
    background: var(
      --wds-badge-outline-neutral-fill,
      var(--wds-color-fill-dark-secondary)
    );
  }

  &#{&}--type-outlined#{&}--skin-neutral &__text {
    color: var(
      --wds-badge-outline-neutral-label-color,
      var(--wds-color-black-300)
    );
  }

  &--type-outlined#{&}--skin-warning {
    border-color: var(
      --wds-badge-outline-warning-border-color,
      var(--wds-color-yellow-0)
    );
    color: var(
      --wds-badge-outline-warning-label-color,
      var(--wds-color-yellow-0)
    );
    background: var(
      --wds-badge-outline-warning-fill,
      var(--wds-color-yellow-500)
    );
  }

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

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

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

  &--type-outlined#{&}--skin-neutral-standard {
    border-color: var(
      --wds-badge-outline-neutral-standard-border-color,
      var(--wds-color-blue-200)
    );
    color: var(
      --wds-badge-outline-neutral-standard-label-color,
      var(--wds-color-text-standard-primary)
    );
  }

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

  &--type-outlined#{&}--skin-neutral-success {
    border-color: var(
      --wds-badge-outline-neutral-success-border-color,
      var(--wds-color-green-100)
    );
    color: var(
      --wds-badge-outline-neutral-success-label-color,
      var(--wds-color-text-standard-primary)
    );
  }

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

  &--type-outlined#{&}--skin-neutral-danger {
    border-color: var(
      --wds-badge-outline-neutral-danger-border-color,
      var(--wds-color-red-200)
    );
    color: var(
      --wds-badge-outline-neutral-danger-label-color,
      var(--wds-color-text-standard-primary)
    );
  }

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

  &--type-outlined#{&}--skin-premium {
    border-color: var(
      --wds-badge-outline-premium-border-color,
      var(--wds-color-blue-100)
    );
    color: var(
      --wds-badge-outline-premium-label-color,
      var(--wds-color-blue-50)
    );
    background: var(
      --wds-badge-outline-premium-fill,
      var(--wds-color-fill-premium-tertiary-hover)
    );
  }

  &#{&}--type-outlined#{&}--skin-premium &__text {
    color: var(
      --wds-badge-outline-premium-label-color,
      var(--wds-color-blue-50)
    );
  }

  &--type-outlined#{&}--skin-neutral-light {
    border-color: var(
      --wds-badge-outline-neutral-light-border-color,
      var(--wds-color-border-dark-primary)
    );
    color: var(
      --wds-badge-outline-neutral-light-label-color,
      var(--wds-color-text-standard-primary)
    );
  }

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

  &--type-outlined#{&}--skin-warning-light {
    border-color: var(
      --wds-badge-outline-warning-light-border-color,
      var(--wds-color-yellow-0)
    );
    color: var(
      --wds-badge-outline-warning-light-label-color,
      var(--wds-color-text-standard-primary)
    );
  }

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

  &--size-medium {
    padding: var(--wds-badge-padding-vertical-medium, var(--wds-space-100))
      var(--wds-badge-padding-horizontal-medium, var(--wds-space-200));
    height: var(--wds-badge-size-medium, var(--wds-space-700));
  }

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

  &--size-small {
    padding: var(--wds-badge-padding-vertical-small, var(--wds-space-50))
      var(--wds-badge-padding-horizontal-small, var(--wds-space-200));
    height: var(--wds-badge-size-small, var(--wds-space-600));
  }

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

  &#{&}#{&}--size-small &__text {
    font-size: var(
      --wds-badge-label-font-size-small,
      var(--wds-font-size-body-tiny)
    );
    line-height: var(
      --wds-badge-label-font-line-height-small,
      var(--wds-font-line-height-body-tiny)
    );
  }

  &--size-tiny {
    padding: var(--wds-badge-padding-vertical-tiny, var(--wds-space-0))
      var(--wds-badge-padding-horizontal-tiny, var(--wds-space-150));
    height: var(--wds-badge-size-tiny, var(--wds-space-500));
  }

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