$suffix-padding-small: var(
  --wds-form-field-label-gap-small,
  var(--wds-space-150, 12px)
);
$suffix-padding-tiny: var(
  --wds-form-field-label-gap-tiny,
  var(--wds-space-100, 12px)
);
$children-margin-small: var(
  --wds-form-field-label-gap-small,
  var(--wds-space-150, 6px)
);
$children-margin-tiny: var(
  --wds-form-field-label-gap-tiny,
  var(--wds-space-100, 6px)
);
$inline-label-min-height: 36px;
$label-fill: var(
  --wds-form-field-label-fill,
  var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
);
$label-readonly: var(
  --wds-form-field-label-readonly,
  var(
    --wds-form-field-label-fill,
    var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
  )
);
$label-font-size-tiny: var(
  --wds-form-field-label-font-size-tiny,
  var(--wds-font-size-body-tiny, 12px)
);
$label-line-height-tiny: var(
  --wds-form-field-label-line-height-tiny,
  var(--wds-font-line-height-body-tiny, 15px)
);
$label-font-size-small: var(
  --wds-form-field-label-font-size-small,
  var(--wds-font-size-body-small, 14px)
);
$label-line-height-small: var(
  --wds-form-field-label-line-height-small,
  var(--wds-font-line-height-body-small, 18px)
);
$label-font-weight: var(
  --wds-form-field-label-font-weight,
  var(--wds-font-weight-regular, var(--wsr-font-weight-medium))
);
$char-count-fill: var(
  --wds-color-text-placeholder,
  var(--wsr-color-D40, #868aa5)
);
$asterisk-fill: var(--wds-color-text-primary, var(--wsr-color-B10, #116dff));
$status-error-fill: var(
  --wds-color-text-destructive,
  var(--wsr-color-R10, #e62214)
);
$status-warning-fill: var(
  --wds-color-text-warning,
  var(--wsr-color-Y10, #ffb700)
);

.form-field {
  display: inline-flex;
  flex-wrap: wrap;
  font-size: initial;
  align-items: center;

  &--label-alignment-top {
    align-items: flex-start;
  }

  &--stretch-content {
    display: flex;
    width: 100%;
  }

  &--has-inline-elements {
    display: inline-grid;
    align-content: center;
    grid-template-rows: max-content max-content;
    grid-template-columns: auto 1fr;
  }

  &--label-placement-left {
    grid-template-columns: 1fr auto;
    justify-content: flex-end;
  }

  &--has-inline-elements#{&}--stretch-content {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  &--label-placement-left#{&}--stretch-content {
    grid-template-columns: auto 1fr;
  }

  &--label-placement-left &__label {
    order: 0;
  }

  &--label-placement-left &__suffix {
    order: 1;
    align-self: center;
  }

  &--label-placement-right &__suffix {
    align-self: center;
  }

  &--label-placement-left &__children {
    order: 2;
  }

  &--label-placement-left &__status-message,
  &--label-placement-right &__status-message {
    order: 3;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  &__children {
    flex: 0 0 100%;
    max-width: 100%;
    margin: auto 0;
  }

  &--stretch-content &__children {
    flex-grow: 1;
  }

  &--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 {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
  }

  &__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-row {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    gap: var(--wds-space-50, 3px);
    max-width: 100%;
    justify-content: space-between;
  }

  &__label-row--ellipsis {
    overflow: hidden;
  }

  &--min-label-height &__label-row {
    min-height: $inline-label-min-height;
    line-height: $inline-label-min-height;
  }

  &#{&}#{&}--min-label-height #{&}__label {
    min-height: $inline-label-min-height;
    line-height: $inline-label-min-height;
  }

  &__label-row-main {
    display: flex;
    min-width: 0;
  }

  &#{&}#{&} #{&}__label--label-size-small,
  &#{&}#{&} #{&}__label--label-size-medium {
    color: $label-fill;
  }

  &#{&}#{&} #{&}__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;
  }

  &:has([data-input-root][data-readonly='true'])
    &__label:not(#{&}__label--label-size-tiny),
  &:has([data-input-root][data-disabled='true'])
    &__label:not(#{&}__label--label-size-tiny) {
    color: $label-readonly;
  }

  &__asterisk {
    display: inline-block;
    color: $asterisk-fill;
    margin-left: var(--wds-space-50, 3px);
  }

  &__asterisk svg {
    vertical-align: text-top;
  }

  &__suffix {
    display: flex;
    max-width: 50%;
    justify-content: flex-end;
    align-self: flex-end;
  }

  &__suffix--no-label {
    max-width: 100%;
  }

  &#{&}#{&}#{&} #{&}__char-count--secondary {
    color: $char-count-fill;
  }

  &#{&}#{&} #{&}__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;
  }

  &__info-icon {
    margin: -1px 1px 0 4px;
  }

  @media (hover: hover) {
    .provider--compact-mode
      [data-hoverable-action-trigger]:hover
      &__info-icon--compact-hover-reveal,
    [data-hoverable-action-trigger]:hover &__info-icon--hover-reveal {
      visibility: visible;
    }
  }

  .provider--compact-mode
    [data-hoverable-action-trigger]
    &__info-icon--compact-hover-reveal,
  [data-hoverable-action-trigger] &__info-icon--hover-reveal {
    visibility: hidden;
  }

  &--required &__info-icon {
    margin-left: 1px;
  }

  &__info-icon svg {
    vertical-align: -5px;
  }

  &__status-message {
    display: flex;
    align-items: flex-start;
    gap: var(--wds-space-50, 3px);
    margin-top: var(--wds-space-100, 6px);
  }

  &__status-message--status-error &__status-icon {
    color: $status-error-fill;
  }

  &__status-message--status-warning &__status-icon {
    color: $status-warning-fill;
  }

  &__status-icon {
    height: 16px;
    width: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
}