// Set default customise component variables here,
// Override it in theme variables files

$x-form-feedback-icon-space: (map_get($spacers, 4) + map_get($spacers, 3))!default;

.needs-validation {
  margin-right: $x-form-feedback-icon-space;

  .x-form-control-container {
    @extend .d-flex,
            .align-items-center,
            .position-relative;
  }

  .x-form-feedback-icon {
    @extend .pr-1,
            .position-absolute,
            .x-icon-md;
    //@include transition($transition-fade);

    // Position = icon width + gap between input field and icon
    right: -$x-form-feedback-icon-space;
  }

  .form-group:not(.ng-dirty) {
    .x-form-feedback-icon {
      @extend .x-invisible;
    }
  }

  label:not(.custom-control) {
    margin-right: -$x-form-feedback-icon-space;
  }


  // ng-valid, ng-invalid for Angular
  .ng-valid,
  :not(.ng-invalid) ~ .ng-valid {
    .x-form-feedback-icon {
      @extend .text-success;
    }
  }

  .ng-invalid ~ .ng-valid,
  .ng-invalid {
    .x-form-feedback-icon {
      @extend .text-danger;
    }
  }

}


// for invalid elements we want the border-color and box-shadow from bootstrap
.x-is-invalid {
  @extend .is-invalid;
}


// Feedback Message
.x-invalid-feedback {
  @extend .d-block,
          .invalid-feedback;

}