dvn-form-field {
  display: block;
  margin-bottom: var(--form-field-margin-bottom);
}

dvn-form-field:last-child {
  margin-bottom: 0;
}

dvn-form-field.horizontal {
  display: inline-block;
  margin-bottom: 0;
  margin-right: var(--form-field-margin-bottom);
}

dvn-form-field.horizontal:last-child {
  margin-right: 0;
}

dvn-form-field.small {
  --form-field-margin-bottom: calc(6 * var(--spacing-unit));
  --form-field-font-size: var(--font-size-small);
}

dvn-form-field.medium {
  --form-field-margin-bottom: calc(6 * var(--spacing-unit));
  --form-field-font-size: var(--font-size-medium);
}

dvn-form-field.large {
  --form-field-margin-bottom: calc(6 * var(--spacing-unit));
  --form-field-font-size: var(--font-size-large);
}

/* Label */
dvn-form-field > label {
  font-weight: bold;
  color: var(--color-text);
  display: inline-block;
  /*width: ${props => props.layout === 'horizontal' && props.labelWidth};*/
  margin-bottom: calc(2 * var(--spacing-unit));
}

dvn-form-field.vertical label {
  display: block;
}

/* Label required indicator */
/*label:after {
  display: none;
  !*margin-left: -6px;
  margin-right: 1px;*!
  !*color: ${props => getKindColorMap(props.theme!)[props.requiredSignColor || 'default'] as string};*!
  color: var(--color-danger);
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}

dvn-form-field.required label:after {
  display: inline-block;
}*/

/* Description */
.description {
  margin: var(--spacing-unit) 0 0 0;
  color: var(--color-text-secondary);
  font-size: var(--form-field-font-size);
  font-weight: normal;
}

/* Error */
dvn-form-field .error-message {
  padding: calc(0.5 * var(--spacing-unit)) 0;
  font-size: calc(var(--form-field-font-size) / 7 * 6);
  color: var(--color-danger);
}

dvn-form-field.vertical .error {
  /*margin-left: 5px;*/
}
