.xh-form-field {
  display: flex;
  flex-direction: column;
  padding: var(--xh-form-field-padding);
  margin: var(--xh-form-field-margin);

  &__label {
    color: var(--xh-form-field-label-color);
    font-size: var(--xh-form-field-label-font-size);
    font-style: var(--xh-form-field-label-font-style);
    font-weight: var(--xh-form-field-label-font-weight);
    text-transform: var(--xh-form-field-label-text-transform);

    // Borders + padding (not inline)
    border-bottom: var(--xh-form-field-label-border-bottom);
    margin: var(--xh-form-field-label-margin);
    padding: var(--xh-form-field-label-padding);

    // Borders + padding (inline)
    .xh-form-field--inline & {
      border-bottom: var(--xh-form-field-label-inline-border-bottom);
      margin: var(--xh-form-field-label-inline-margin);
      padding: var(--xh-form-field-label-inline-padding);
    }
  }

  &__inner {
    // Used for unsizeable children
    &--block {
      display: block;
    }

    // Used for sizeable children that should fill the FormField
    &--flex {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
  }

  &__info-msg,
  &__validation-msg {
    font-size: var(--xh-form-field-msg-font-size);
    line-height: var(--xh-form-field-msg-line-height);
    margin: var(--xh-form-field-msg-margin);
    text-transform: var(--xh-form-field-msg-text-transform);
  }

  &__validation-msg {
    &--error {
      color: var(--xh-form-field-invalid-color);
    }

    &--info {
      color: var(--xh-form-field-info-color);
    }

    &--warning {
      color: var(--xh-form-field-warning-color);
    }
  }

  &--invalid .xh-form-field__label {
    color: var(--xh-form-field-invalid-color);
  }

  &--warning .xh-form-field__label {
    color: var(--xh-form-field-warning-color);
  }

  &--info .xh-form-field__label {
    color: var(--xh-form-field-info-color);
  }

  &.xh-form-field--readonly {
    .xh-form-field__validation-msg {
      display: none;
    }

    .xh-form-field__readonly-display {
      padding: var(--xh-pad-px) 0;
    }
  }
}