:host {
  display: flex;
}

.form-field-label {
  $grey-normal: var(--sdg-color-grey-normal);

  &-container {
    display: flex;
    flex-flow: column;
    width: fit-content;
    padding-bottom: 4px;

    &.xl {
      max-width: 825px;
    }

    &.lg,
    &.multi {
      max-width: 528px;
    }

    &.md,
    &.sm,
    &.xs {
      max-width: 249px;
    }
  }

  &-label {
    font-size: var(--sdg-font-size-md);
    line-height: var(--sdg-line-height-md);
    font-weight: bold;

    &.--disabled {
      color: $grey-normal;
    }
  }

  &-asterisk {
    color: var(--sdg-color-red-normal);
    font-size: var(--sdg-font-size-xl);
  }

  &-clarification {
    font-size: var(--sdg-font-size-sm);
    line-height: var(--sdg-line-height-sm);

    &.--disabled {
      color: $grey-normal;
    }
  }
}