.form-text {
  margin-top: -$spacer / 4;
  margin-bottom: $spacer / 2;
  color: gray("800");
}

.col-form-label {
  color: gray("800");
  font-size: 14px;
}

.form-group {
  margin-bottom: $spacer * 2;
}

.custom-select,
.custom-control-label,
.form-control {
  //important needed to override validation colors on radio labels
  color: theme-color("dark") !important;
  font-size: 16px;
  border-color: gray("400") !important;
  &.is-invalid,
  &:invalid {
    border-bottom: 2px solid theme-color("danger") !important;
  }
}

.custom-control {
  .custom-control-input[disabled=disabled] {
    & + .custom-control-label {
      // Disabled label for checkbox, radio,
      // switch bootstrap form components
      color: gray("700")!important;
    }
  }
}

.b-form-tag-remove {
  // X button to remove tag
  font-weight: normal;
}

.b-form-tags-button {
  // Add button inside input field
  white-space: nowrap;
  margin-right: -$spacer;
  &.btn-link-primary {
    color: theme-color("primary");
    fill: currentColor;
  }
}

.form-background {
  background-color: gray("200");
}