$label-gap-tiny: var(--wds-field-set-label-gap-tiny, var(--wds-space-100, 9px));
$label-gap-small: var(
  --wds-field-set-label-gap-small,
  var(--wds-space-150, 9px)
);
$label-gap: 6px;
$gap-small: var(--wds-field-set-gap-small, var(--wds-space-100, 6px));
$gap-medium: var(--wds-field-set-gap-medium, var(--wds-space-200, 12px));
$gap-large: var(--wds-field-set-gap-large, var(--wds-space-300, 18px));
$label-fill: var(
  --wds-field-set-label-fill,
  var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853))
);
$label-font-size-tiny: var(
  --wds-field-set-label-font-size-tiny,
  var(--wds-font-size-body-tiny, 12px)
);
$label-line-height-tiny: var(
  --wds-field-set-label-font-line-height-tiny,
  var(--wds-font-line-height-body-tiny, 15px)
);
$label-font-size-small: var(
  --wds-field-set-label-font-size-small,
  var(--wds-font-size-body-small, 14px)
);
$label-line-height-small: var(
  --wds-field-set-label-font-line-height-small,
  var(--wds-font-line-height-body-small, 18px)
);
$label-font-weight: var(
  --wds-field-set-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-blue-100, var(--wsr-color-B10, #116dff));
$status-error-fill: var(--wds-color-red-100, var(--wsr-color-R10, #e62214));
$status-warning-fill: var(
  --wds-color-yellow-100,
  var(--wsr-color-Y10, #ffb700)
);

.field-set {
  border: none;
  padding: 0;
  margin: 0;
  min-inline-size: auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;

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

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

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

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

  &--label-size-tiny#{&}--label-placement-top &__children,
  &--label-size-tiny#{&}--has-only-suffix &__children {
    padding-top: $label-gap-tiny;
  }

  &--label-size-small#{&}--label-placement-top &__children,
  &--label-size-small#{&}--has-only-suffix &__children {
    padding-top: $label-gap-small;
  }

  &--label-placement-top &__label-row {
    display: flex;
    align-items: flex-end;
    flex: 1 0 auto;
    max-width: 100%;
    justify-content: space-between;
  }

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

  &__suffix-row {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  &__legend {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  &__children {
    width: 100%;
    display: grid;
    align-items: flex-start;
    grid-auto-flow: column;
    justify-items: stretch;
    gap: $gap-small;
  }

  &__children--alignment-start {
    justify-items: start;
    align-items: flex-start;
  }

  &__children--alignment-center {
    justify-items: center;
    align-items: center;
  }

  &__children--alignment-end {
    justify-items: end;
    align-items: flex-end;
  }

  &__children--direction-horizontal {
    grid-auto-flow: column;
    justify-items: stretch;
  }

  &__children--direction-vertical {
    grid-auto-flow: row;
  }

  &__children--gap-small {
    gap: $gap-small;
  }

  &__children--gap-medium {
    gap: $gap-medium;
  }

  &__children--gap-large {
    gap: $gap-large;
  }

  &#{&}#{&} #{&}__label--label-size-small {
    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;
  }

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

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

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

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

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

  &__label-indicators {
    display: flex;
    align-items: center;
    gap: $label-gap;
    min-width: 0;
  }

  &__label-indicators--label-size-tiny#{&}__label-indicators--label-placement-right,
  &__label-indicators--label-size-tiny#{&}__label-indicators--label-placement-none {
    margin-left: $label-gap-tiny;
  }

  &__label-indicators--label-size-small#{&}__label-indicators--label-placement-right,
  &__label-indicators--label-size-small#{&}__label-indicators--label-placement-none {
    margin-left: $label-gap-small;
  }

  &__label-indicators--label-size-tiny#{&}__label-indicators--label-placement-left {
    margin-right: $label-gap-tiny;
  }

  &__label-indicators--label-size-small#{&}__label-indicators--label-placement-left {
    margin-right: $label-gap-small;
  }

  &__status-message {
    display: flex;
    gap: 3px;
    margin-top: 6px;
  }

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

  &__status-message--label-size-tiny#{&}__status-message--label-placement-left {
    padding-left: $label-gap-tiny;
  }

  &__status-message--label-size-small#{&}__status-message--label-placement-left {
    padding-left: $label-gap-small;
  }

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

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

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

  &__status-message--label-size-tiny &__status-icon {
    height: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  &__suffix {
    display: flex;
    max-width: 50%;
    justify-content: 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;
  }
}