fix(input-group): prefix & suffix bootrstrap borders (#16149)

Co-authored-by: Nikolay Alipiev <nikolay.alipiev@gmail.com>

Author: adrianptrv

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -136,20 +136,6 @@
     }
 
     @if $variant == 'bootstrap' {
-        .igx-input-group--disabled {
-            %igx-combo__toggle-button {
-                border-inline-start-width: rem(1px);
-                border-inline-start-style: solid;
-                border-inline-start-color: inherit;
-            }
-        }
-
-        igx-suffix:not(.igx-combo__clear-button) + %igx-combo__toggle-button {
-            border-inline-start-width: rem(1px);
-            border-inline-start-style: solid;
-            border-inline-start-color: inherit;
-        }
-
         .igx-input-group__bundle::after {
             height: rem(1px) !important;
         }

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -612,7 +612,7 @@
     %bootstrap-file-focused,
     %bootstrap-file-valid,
     %bootstrap-file-warning,
-    %bootstrap-file-invalid,
+    %bootstrap-file-invalid
     {
         %form-group-bundle {
             border-radius: var-get($theme, 'box-border-radius');
@@ -670,18 +670,42 @@
         %form-group-bundle {
             box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
         }
+
+        %form-group-prefix:not(:first-child) {
+            border-inline-start-color: var-get($theme, 'success-secondary-color');
+        }
+
+        %form-group-suffix:not(:last-child) {
+            border-inline-end-color: var-get($theme, 'success-secondary-color');
+        }
     }
 
     %bootstrap-file-warning-focused {
         %form-group-bundle {
             box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
+
+            %form-group-prefix:not(:first-child) {
+                border-inline-start-color: var-get($theme, 'warning-secondary-color');
+            }
+    
+            %form-group-suffix:not(:last-child) {
+                border-inline-end-color: var-get($theme, 'warning-secondary-color');
+            }
         }
     }
 
     %bootstrap-file-invalid-focused {
         %form-group-bundle {
             box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
         }
+
+        %form-group-prefix:not(:first-child) {
+            border-inline-start-color: var-get($theme, 'error-secondary-color');
+        }
+
+        %form-group-suffix:not(:last-child) {
+            border-inline-end-color: var-get($theme, 'error-secondary-color');
+        }
     }
 
     @if $variant == 'bootstrap' {
@@ -691,6 +715,14 @@
             %upload-button {
                 border-color: var-get($theme, 'focused-border-color');
             }
+
+            %form-group-prefix:not(:first-child) {
+                border-inline-start-color: var-get($theme, 'focused-border-color');
+            }
+
+            %form-group-suffix:not(:last-child) {
+                border-inline-end-color: var-get($theme, 'focused-border-color');
+            }
         }
     }
 
@@ -2015,11 +2047,6 @@
                 };
             }
         }
-
-        .igx-input-group__clear-icon + igx-suffix,
-        .igx-input-group__clear-icon + [igxPrefix] {
-            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
-        }
     }
 
     %form-group-display--bootstrap-suffixed-focused {
@@ -2284,6 +2311,24 @@
         border-color: var-get($theme, 'disabled-border-color');
         color: var-get($theme, 'disabled-text-color');
     }
+
+    %form-group-prefix--disabled-bootstrap:not(:first-child) {
+        border-inline-start-color: var-get($theme, 'disabled-border-color');
+    }
+
+    %form-group-suffix--disabled-bootstrap:not(:last-child) {
+        border-inline-end-color: var-get($theme, 'disabled-border-color');
+    }
+
+    @if $variant == 'bootstrap' {
+        %form-group-prefix:not(:first-child) {
+            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
+        }
+
+        %form-group-suffix:not(:last-child) {
+            border-inline-end: rem(1px) solid var-get($theme, 'border-color');
+        }
+    }
 }
 
 /// Adds typography styles for the igx-input-group component.

projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss

@@ -13,22 +13,6 @@
         display: block;
     }
 
-    @if $variant == 'bootstrap' {
-        .igx-input-group--disabled {
-            %igx-select__toggle-button {
-                border-inline-start-width: rem(1px);
-                border-inline-start-style: solid;
-                border-inline-start-color: inherit;
-            }
-        }
-
-        igx-suffix + %igx-select__toggle-button {
-            border-inline-start-width: rem(1px);
-            border-inline-start-style: solid;
-            border-inline-start-color: inherit;
-        }
-    }
-
     .igx-input-group {
         %igx-select__toggle-button {
             background: var-get($theme, 'toggle-button-background');