.ui-field {
  margin: scale(4) 0;
}

.ui-field .label {
  color: var(--ea-colour-text-default);
  display: inline-block;
  font-family: var(--ea-typography-ui);
  font-size: var(--ea-typography-base-font-size);
  font-weight: 500;
  margin: 0 0 scale(1) 0;
}

.ui-field .description {
  color: var(--ea-colour-text-muted);
  font-size: var(--ea-typography-base-font-size);
  margin: calc(-1 * scale(1)) 0 scale(1) 0;
}

.validation-message {
  color: var(--ea-colour-text-danger);
  display: flex;
  font-size: var(--ea-typography-small-font-size);
  line-height: 16px;
  margin-top: scale(2);
}

.validation-icon {
  margin-right: scale(2);
}

.validation-icon path {
  fill: var(--ea-colour-icon-danger);
}

.ui-field.horizontal {
  display: flex;
}

.ui-field.horizontal .descriptors {
  flex: 0 0 calc(scale(32) + scale(8));
  margin-right: scale(4);
}

.ui-field.horizontal .controls {
  flex: 1 1 auto;
}