// 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;
  // padding-right: $x-form-feedback-icon-space;

  .x-help-link {
    // 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,
            %x-icon-md;
    position: absolute;
    right: 0.5rem;
  }

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

  // ng-valid, ng-invalid for Angular
  .ng-valid,
  :not(.ng-invalid) ~ .ng-valid {
    .x-form-feedback-icon {
      color: theme-color("success");
    }
  }

  .ng-invalid ~ .ng-valid,
  .ng-invalid {
    .x-form-feedback-icon {
      color: theme-color("danger");
    }
  }

}


// for invalid elements we want the border-color and box-shadow from bootstrap
.x-is-invalid {
  @extend .is-invalid;
  background-image: none !important;
}

// For invalid checkbox inputs after label
.x-invalid-checkbox + .custom-control-label {
  &::before, &::before &:focus {
    box-shadow: 0 0 0 0.2rem lighten(theme-color("danger"), 35%);
  }
  &::after {
    border: 2px solid theme-color("danger");
    border-radius: 0.5rem;
  }
}

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

}