$border-radius-medium: var(
  --wds-badge-border-radius-medium,
  var(--wds-border-radius-200)
) !default;
$label-font-line-height-small: var(
  --wds-badge-label-font-line-height-small,
  var(--wds-font-line-height-body-tiny)
) !default;
$label-font-size-small: var(
  --wds-badge-label-font-size-small,
  var(--wds-font-size-body-tiny)
) !default;
$outline-dark-fill: var(
  --wds-badge-outline-dark-fill,
  var(--wds-color-fill-dark-secondary)
) !default;
$outline-dark-label-color: var(
  --wds-badge-outline-dark-label-color,
  var(--wds-color-black-200)
) !default;
$outline-destructive-border-color: var(
  --wds-badge-outline-destructive-border-color,
  var(--wds-color-red-200)
) !default;
$outline-destructive-fill: var(
  --wds-badge-outline-destructive-fill,
  var(--wds-color-red-600)
) !default;
$outline-destructive-label-color: var(
  --wds-badge-outline-destructive-label-color,
  var(--wds-color-red-50)
) !default;
$outline-neutral-danger-border-color: var(
  --wds-badge-outline-neutral-danger-border-color,
  var(--wds-color-red-200)
) !default;
$outline-neutral-danger-label-color: var(
  --wds-badge-outline-neutral-danger-label-color,
  var(--wds-color-text-standard-primary)
) !default;
$outline-neutral-fill: var(
  --wds-badge-outline-neutral-fill,
  var(--wds-color-fill-dark-secondary)
) !default;
$outline-neutral-label-color: var(
  --wds-badge-outline-neutral-label-color,
  var(--wds-color-text-standard-secondary)
) !default;
$outline-neutral-light-border-color: var(
  --wds-badge-outline-neutral-light-border-color,
  var(--wds-color-black-500)
) !default;
$outline-neutral-light-label-color: var(
  --wds-badge-outline-neutral-light-label-color,
  var(--wds-color-text-standard-primary)
) !default;
$outline-neutral-standard-border-color: var(
  --wds-badge-outline-neutral-standard-border-color,
  var(--wds-color-border-standard-primary)
) !default;
$outline-neutral-standard-label-color: var(
  --wds-badge-outline-neutral-standard-label-color,
  var(--wds-color-text-standard-primary)
) !default;
$outline-neutral-success-border-color: var(
  --wds-badge-outline-neutral-success-border-color,
  var(--wds-color-border-success-primary)
) !default;
$outline-neutral-success-label-color: var(
  --wds-badge-outline-neutral-success-label-color,
  var(--wds-color-text-standard-primary)
) !default;
$outline-premium-border-color: var(
  --wds-badge-outline-premium-border-color,
  var(--wds-color-blue-250)
) !default;
$outline-premium-fill: var(
  --wds-badge-outline-premium-fill,
  var(--wds-color-blue-500)
) !default;
$outline-premium-label-color: var(
  --wds-badge-outline-premium-label-color,
  var(--wds-color-text-premium)
) !default;
$outline-standard-border-color: var(
  --wds-badge-outline-standard-border-color,
  var(--wds-color-border-standard-primary)
) !default;
$outline-standard-fill: var(
  --wds-badge-outline-standard-fill,
  var(--wds-color-blue-500)
) !default;
$outline-standard-label-color: var(
  --wds-badge-outline-standard-label-color,
  var(--wds-color-blue-50)
) !default;
$outline-success-border-color: var(
  --wds-badge-outline-success-border-color,
  var(--wds-color-green-300)
) !default;
$outline-success-fill: var(
  --wds-badge-outline-success-fill,
  var(--wds-color-green-600)
) !default;
$outline-success-label-color: var(
  --wds-badge-outline-success-label-color,
  var(--wds-color-green-50)
) !default;
$outline-urgent-border-color: var(
  --wds-badge-outline-urgent-border-color,
  var(--wds-color-border-urgent-primary)
) !default;
$outline-urgent-fill: var(
  --wds-badge-outline-urgent-fill,
  var(--wds-color-orange-600)
) !default;
$outline-urgent-label-color: var(
  --wds-badge-outline-urgent-label-color,
  var(--wds-color-orange-50)
) !default;
$outline-warning-border-color: var(
  --wds-badge-outline-warning-border-color,
  var(--wds-color-yellow-300)
) !default;
$outline-warning-fill: var(
  --wds-badge-outline-warning-fill,
  var(--wds-color-fill-warning-tertiary-hover)
) !default;
$outline-warning-label-color: var(
  --wds-badge-outline-warning-label-color,
  var(--wds-color-yellow-50)
) !default;
$outline-warning-light-border-color: var(
  --wds-badge-outline-warning-light-border-color,
  var(--wds-color-border-warning-primary)
) !default;
$outline-warning-light-label-color: var(
  --wds-badge-outline-warning-light-label-color,
  var(--wds-color-text-standard-primary)
) !default;
$padding-horizontal-medium: var(
  --wds-badge-padding-horizontal-medium,
  var(--wds-space-200)
) !default;
$padding-horizontal-small: var(
  --wds-badge-padding-horizontal-small,
  var(--wds-space-200)
) !default;
$padding-horizontal-tiny: var(
  --wds-badge-padding-horizontal-tiny,
  var(--wds-space-150)
) !default;
$padding-vertical-medium: var(
  --wds-badge-padding-vertical-medium,
  var(--wds-space-100)
) !default;
$padding-vertical-small: var(
  --wds-badge-padding-vertical-small,
  var(--wds-space-50)
) !default;
$padding-vertical-tiny: var(
  --wds-badge-padding-vertical-tiny,
  var(--wds-space-0)
) !default;
$size-medium: var(--wds-badge-size-medium, var(--wds-space-700)) !default;
$size-small: var(--wds-badge-size-small, var(--wds-space-600)) !default;
$size-tiny: var(--wds-badge-size-tiny, var(--wds-space-500)) !default;
$solid-neutral-danger-fill: var(
  --wds-badge-solid-neutral-danger-fill,
  var(--wds-color-red-600)
) !default;
$solid-neutral-danger-label-color: var(
  --wds-badge-solid-neutral-danger-label-color,
  var(--wds-color-red-50)
) !default;
$solid-neutral-light-label-color: var(
  --wds-badge-solid-neutral-light-label-color,
  var(--wds-color-black-200)
) !default;
$solid-neutral-standard-fill: var(
  --wds-badge-solid-neutral-standard-fill,
  var(--wds-color-blue-500)
) !default;
$solid-neutral-standard-label-color: var(
  --wds-badge-solid-neutral-standard-label-color,
  var(--wds-color-blue-50)
) !default;
$solid-neutral-success-fill: var(
  --wds-badge-solid-neutral-success-fill,
  var(--wds-color-green-600)
) !default;
$solid-neutral-success-label-color: var(
  --wds-badge-solid-neutral-success-label-color,
  var(--wds-color-green-50)
) !default;
$solid-success-fill: var(
  --wds-badge-solid-success-fill,
  var(--wds-color-fill-success-primary)
) !default;
$solid-success-label-color: var(
  --wds-badge-solid-success-label-color,
  var(--wds-color-text-standard-primary-light)
) !default;
$solid-urgent-label-color: var(
  --wds-badge-solid-urgent-label-color,
  var(--wds-color-text-standard-primary-light)
) !default;
$solid-warning-label-color: var(
  --wds-badge-solid-warning-label-color,
  var(--wds-color-text-standard-primary-light)
) !default;
$solid-warning-light-fill: var(
  --wds-badge-solid-warning-light-fill,
  var(--wds-color-fill-warning-tertiary-hover)
) !default;
$solid-warning-light-label-color: var(
  --wds-badge-solid-warning-light-label-color,
  var(--wds-color-yellow-50)
) !default;
$transparent-neutral-danger-label-color: var(
  --wds-badge-transparent-neutral-danger-label-color,
  var(--wds-color-red-400)
) !default;
$transparent-neutral-label-color: var(
  --wds-badge-transparent-neutral-label-color,
  var(--wds-color-black-200)
) !default;
$transparent-neutral-light-label-color: var(
  --wds-badge-transparent-neutral-light-label-color,
  var(--wds-color-black-700)
) !default;
$transparent-neutral-standard-label-color: var(
  --wds-badge-transparent-neutral-standard-label-color,
  var(--wds-color-blue-400)
) !default;
$transparent-neutral-success-label-color: var(
  --wds-badge-transparent-neutral-success-label-color,
  var(--wds-color-green-400)
) !default;
$transparent-success-label-color: var(
  --wds-badge-transparent-success-label-color,
  var(--wds-color-text-success)
) !default;
$transparent-urgent-label-color: var(
  --wds-badge-transparent-urgent-label-color,
  var(--wds-color-text-urgent)
) !default;
$transparent-warning-label-color: var(
  --wds-badge-transparent-warning-label-color,
  var(--wds-color-text-warning)
) !default;
$transparent-warning-light-label-color: var(
  --wds-badge-transparent-warning-light-label-color,
  var(--wds-color-yellow-400)
) !default;

.badge {
  border-radius: $border-radius-medium;

  &--type-transparent#{&}--skin-success {
    color: $transparent-success-label-color;
  }

  &#{&}--type-transparent#{&}--skin-success &__text {
    color: $transparent-success-label-color;
  }

  &--type-transparent#{&}--skin-neutral {
    color: $transparent-neutral-label-color;
  }

  &#{&}--type-transparent#{&}--skin-neutral &__text {
    color: $transparent-neutral-label-color;
  }

  &--type-transparent#{&}--skin-warning {
    color: $transparent-warning-label-color;
  }

  &#{&}--type-transparent#{&}--skin-warning &__text {
    color: $transparent-warning-label-color;
  }

  &--type-transparent#{&}--skin-urgent {
    color: $transparent-urgent-label-color;
  }

  &#{&}--type-transparent#{&}--skin-urgent &__text {
    color: $transparent-urgent-label-color;
  }

  &--type-transparent#{&}--skin-neutral-standard {
    color: $transparent-neutral-standard-label-color;
  }

  &#{&}--type-transparent#{&}--skin-neutral-standard &__text {
    color: $transparent-neutral-standard-label-color;
  }

  &--type-transparent#{&}--skin-neutral-success {
    color: $transparent-neutral-success-label-color;
  }

  &#{&}--type-transparent#{&}--skin-neutral-success &__text {
    color: $transparent-neutral-success-label-color;
  }

  &--type-transparent#{&}--skin-neutral-danger {
    color: $transparent-neutral-danger-label-color;
  }

  &#{&}--type-transparent#{&}--skin-neutral-danger &__text {
    color: $transparent-neutral-danger-label-color;
  }

  &--type-transparent#{&}--skin-neutral-light {
    color: $transparent-neutral-light-label-color;
  }

  &#{&}--type-transparent#{&}--skin-neutral-light &__text {
    color: $transparent-neutral-light-label-color;
  }

  &--type-transparent#{&}--skin-warning-light {
    color: $transparent-warning-light-label-color;
  }

  &#{&}--type-transparent#{&}--skin-warning-light &__text {
    color: $transparent-warning-light-label-color;
  }

  &--type-solid#{&}--skin-success {
    border-color: $solid-success-fill;
    color: $solid-success-label-color;
    background: $solid-success-fill;
  }

  &#{&}--type-solid#{&}--skin-success &__text {
    color: $solid-success-label-color;
  }

  &--type-solid#{&}--skin-warning {
    color: $solid-warning-label-color;
  }

  &#{&}--type-solid#{&}--skin-warning &__text {
    color: $solid-warning-label-color;
  }

  &--type-solid#{&}--skin-urgent {
    color: $solid-urgent-label-color;
  }

  &#{&}--type-solid#{&}--skin-urgent &__text {
    color: $solid-urgent-label-color;
  }

  &--type-solid#{&}--skin-neutral-standard {
    border-color: $solid-neutral-standard-fill;
    color: $solid-neutral-standard-label-color;
    background: $solid-neutral-standard-fill;
  }

  &#{&}--type-solid#{&}--skin-neutral-standard &__text {
    color: $solid-neutral-standard-label-color;
  }

  &--type-solid#{&}--skin-neutral-success {
    border-color: $solid-neutral-success-fill;
    color: $solid-neutral-success-label-color;
    background: $solid-neutral-success-fill;
  }

  &#{&}--type-solid#{&}--skin-neutral-success &__text {
    color: $solid-neutral-success-label-color;
  }

  &--type-solid#{&}--skin-neutral-danger {
    border-color: $solid-neutral-danger-fill;
    color: $solid-neutral-danger-label-color;
    background: $solid-neutral-danger-fill;
  }

  &#{&}--type-solid#{&}--skin-neutral-danger &__text {
    color: $solid-neutral-danger-label-color;
  }

  &--type-solid#{&}--skin-neutral-light {
    color: $solid-neutral-light-label-color;
  }

  &#{&}--type-solid#{&}--skin-neutral-light &__text {
    color: $solid-neutral-light-label-color;
  }

  &--type-solid#{&}--skin-warning-light {
    border-color: $solid-warning-light-fill;
    color: $solid-warning-light-label-color;
    background: $solid-warning-light-fill;
  }

  &#{&}--type-solid#{&}--skin-warning-light &__text {
    color: $solid-warning-light-label-color;
  }

  &--type-outlined#{&}--skin-general {
    color: $outline-dark-label-color;
    background: $outline-dark-fill;
  }

  &#{&}--type-outlined#{&}--skin-general &__text {
    color: $outline-dark-label-color;
  }

  &--type-outlined#{&}--skin-standard {
    border-color: $outline-standard-border-color;
    color: $outline-standard-label-color;
    background: $outline-standard-fill;
  }

  &#{&}--type-outlined#{&}--skin-standard &__text {
    color: $outline-standard-label-color;
  }

  &--type-outlined#{&}--skin-danger {
    border-color: $outline-destructive-border-color;
    color: $outline-destructive-label-color;
    background: $outline-destructive-fill;
  }

  &#{&}--type-outlined#{&}--skin-danger &__text {
    color: $outline-destructive-label-color;
  }

  &--type-outlined#{&}--skin-success {
    border-color: $outline-success-border-color;
    color: $outline-success-label-color;
    background: $outline-success-fill;
  }

  &#{&}--type-outlined#{&}--skin-success &__text {
    color: $outline-success-label-color;
  }

  &--type-outlined#{&}--skin-neutral {
    color: $outline-neutral-label-color;
    background: $outline-neutral-fill;
  }

  &#{&}--type-outlined#{&}--skin-neutral &__text {
    color: $outline-neutral-label-color;
  }

  &--type-outlined#{&}--skin-warning {
    border-color: $outline-warning-border-color;
    color: $outline-warning-label-color;
    background: $outline-warning-fill;
  }

  &#{&}--type-outlined#{&}--skin-warning &__text {
    color: $outline-warning-label-color;
  }

  &--type-outlined#{&}--skin-urgent {
    border-color: $outline-urgent-border-color;
    color: $outline-urgent-label-color;
    background: $outline-urgent-fill;
  }

  &#{&}--type-outlined#{&}--skin-urgent &__text {
    color: $outline-urgent-label-color;
  }

  &--type-outlined#{&}--skin-neutral-standard {
    border-color: $outline-neutral-standard-border-color;
    color: $outline-neutral-standard-label-color;
  }

  &#{&}--type-outlined#{&}--skin-neutral-standard &__text {
    color: $outline-neutral-standard-label-color;
  }

  &--type-outlined#{&}--skin-neutral-success {
    border-color: $outline-neutral-success-border-color;
    color: $outline-neutral-success-label-color;
  }

  &#{&}--type-outlined#{&}--skin-neutral-success &__text {
    color: $outline-neutral-success-label-color;
  }

  &--type-outlined#{&}--skin-neutral-danger {
    border-color: $outline-neutral-danger-border-color;
    color: $outline-neutral-danger-label-color;
  }

  &#{&}--type-outlined#{&}--skin-neutral-danger &__text {
    color: $outline-neutral-danger-label-color;
  }

  &--type-outlined#{&}--skin-premium {
    border-color: $outline-premium-border-color;
    color: $outline-premium-label-color;
    background: $outline-premium-fill;
  }

  &#{&}--type-outlined#{&}--skin-premium &__text {
    color: $outline-premium-label-color;
  }

  &--type-outlined#{&}--skin-neutral-light {
    border-color: $outline-neutral-light-border-color;
    color: $outline-neutral-light-label-color;
  }

  &#{&}--type-outlined#{&}--skin-neutral-light &__text {
    color: $outline-neutral-light-label-color;
  }

  &--type-outlined#{&}--skin-warning-light {
    border-color: $outline-warning-light-border-color;
    color: $outline-warning-light-label-color;
  }

  &#{&}--type-outlined#{&}--skin-warning-light &__text {
    color: $outline-warning-light-label-color;
  }

  &--size-medium {
    padding: $padding-vertical-medium $padding-horizontal-medium;
    height: $size-medium;
  }

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

  &--size-small {
    padding: $padding-vertical-small $padding-horizontal-small;
    height: $size-small;
  }

  &#{&}#{&}--size-small &__text {
    font-size: $label-font-size-small;
    line-height: $label-font-line-height-small;
  }

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

  &--size-tiny {
    padding: $padding-vertical-tiny $padding-horizontal-tiny;
    height: $size-tiny;
  }

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