$suffix-padding-small: var(
  --wds-form-field-label-gap-small,
  var(--wds-space-200)
);
$suffix-padding-tiny: var(
  --wds-form-field-label-gap-tiny,
  var(--wds-space-150)
);
$children-margin-small: var(
  --wds-form-field-label-gap-small,
  var(--wds-space-200)
);
$children-margin-tiny: var(
  --wds-form-field-label-gap-tiny,
  var(--wds-space-150)
);
$label-font-size-tiny: var(
  --wds-form-field-label-font-size-tiny,
  var(--wds-font-size-body-extra-tiny)
);
$label-line-height-tiny: var(
  --wds-form-field-label-line-height-tiny,
  var(--wds-font-line-height-body-extra-tiny)
);
$label-font-size-small: var(
  --wds-form-field-label-font-size-small,
  var(--wds-font-size-body-tiny)
);
$label-line-height-small: var(
  --wds-form-field-label-line-height-small,
  var(--wds-font-line-height-body-tiny)
);
$label-font-weight: var(
  --wds-form-field-label-font-weight,
  var(--wds-font-weight-medium)
);

.form-field {
  &--label-placement-top &__children {
    padding-top: $children-margin-small;
  }

  &--label-placement-top#{&}--label-size-tiny &__children {
    padding-top: $children-margin-tiny;
  }

  &__children--children-with-inline-label &__suffix {
    margin-bottom: $children-margin-small;
  }

  &--label-size-tiny &__children--children-with-inline-label &__suffix {
    margin-bottom: $children-margin-tiny;
  }

  &--label-placement-right &__children--children-with-inline-label {
    padding-right: $suffix-padding-small;
  }

  &--label-placement-right#{&}--label-size-tiny
    &__children--children-with-inline-label {
    padding-right: $suffix-padding-tiny;
  }

  &--label-placement-left &__children--children-with-inline-label {
    padding-left: $suffix-padding-small;
  }

  &--label-placement-left#{&}--label-size-tiny
    &__children--children-with-inline-label {
    padding-left: $suffix-padding-tiny;
  }

  &#{&}#{&} #{&}__label--label-size-tiny {
    font-size: $label-font-size-tiny;
    line-height: $label-line-height-tiny;
  }

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

  &#{&}#{&} #{&}__char-count--label-size-tiny {
    font-size: $label-font-size-tiny;
    line-height: $label-line-height-tiny;
  }

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