.label {
  font-weight: 500;
  font-size: $label-font-size;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1rem;
  margin-bottom: $spacing-2xs; // TODO: define spacing
  color: $dark-gray-3;

  &.skeleton {
    @include skeleton;
    width: 75px;
    height: $label-font-size;
  }

  &:empty {
    display: none;
  }
}

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

.fieldset {
  margin-bottom: $spacing-md; // TODO: define spacing
  border: 0;
  padding: 0.01em 0 0 0;
  margin: 0;
  min-width: 0;

  legend {
    padding: 0;
    display: table;
  }
}

.form-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  color: $dark;
  font-family: $font-family-sans-serif;
}

input[type='number'] {
  font-family: $font-family-monospace;
}


input[data-invalid],
.text-input__field-wrapper[data-invalid],
.input-group-content[data-invalid],
.text-area__wrapper[data-invalid],
.select-input__wrapper[data-invalid],
.time-picker[data-invalid],
.list-box[data-invalid] {
  ~ .form-requirement {
    max-height: 200px;
    display: block;
    font-size: 14px;
    color: $danger;
  }
}

input[data-valid],
.text-input__field-wrapper[data-valid],
.text-area__wrapper[data-valid],
.select-input__wrapper[data-valid],
.time-picker[data-valid],
.list-box[data-valid] {
  ~ .form-requirement {
    max-height: 200px;
    display: block;
    font-size: 14px;
    color: $success;
  }
}

// Fix for red ring when input is marked required in Firefox
input:not(output):not([data-invalid]):-moz-ui-invalid {
  box-shadow: none;
}

.form-requirement {
  margin: $spacing-2xs 0 0; // TODO: define spacing
  max-height: 0;
  overflow: hidden;
  line-height: 1.5;
  display: none;
}

.label + .form__helper-text {
  margin-top: -$spacing-3xs; // when both helper text and label are rendered
}

.form__helper-text {
  font-style: italic;
  color: $dark-gray-2;
  font-size: calc(#{$label-font-size} - 1px);
  z-index: 0;
  opacity: 1;
  margin-bottom: $spacing-xs; // TODO: define spacing

  // @include carbon--breakpoint('sm') {
  //   max-width: 75%;
  // }
}

.label--disabled,
.form__helper-text--disabled {
  color: $light-gray-2;
}