@syncfusion/blazor-themes 21.2.8 → 21.2.10

package/SCSS-Themes/fluent-dark.scss

@@ -14461,14 +14461,27 @@ $float-label-rtl-value: -10px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 
@@ -31617,6 +31630,7 @@ $tooltip-close-icon-border-hover: $secondary-border-color-hover !default;
 
     /*! tooltip content area */
     .e-tip-content {
+      border-radius: inherit;
       color: $tooltip-content-font-color;
       font-family: $font-family;
       font-size: $tooltip-font-size;
@@ -60937,7 +60951,8 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
 @include export-module('listbox-layout') {
   /* stylelint-disable property-no-vendor-prefix */
   .e-listbox-wrapper,
-  .e-listbox-container {
+  .e-listbox-container,
+  .e-listboxtool-wrapper {
     -webkit-overflow-scrolling: touch;
     box-sizing: border-box;
     cursor: pointer;
@@ -61250,7 +61265,8 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
   }
 
   .e-listbox-wrapper.e-sortableclone,
-  .e-listbox-container.e-sortableclone {
+  .e-listbox-container.e-sortableclone,
+  .e-listboxtool-wrapper.e-sortableclone {
     border-width: 0;
     overflow: visible;
 
@@ -61283,6 +61299,10 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
     }
   }
 
+  .e-listboxtool-wrapper.e-sortableclone{
+    display: block;
+  }
+
   .e-listboxtool-wrapper,
   .e-listboxtool-container {
     cursor: pointer;
@@ -61517,7 +61537,8 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
   }
 
   .e-listbox-wrapper,
-  .e-listbox-container {
+  .e-listbox-container,
+  .e-listboxtool-wrapper {
     font-family: $listbox-font-family;
     font-size: $listbox-font-size;
     @at-root {
@@ -85654,11 +85675,6 @@ $rte-tbar-default-bg: $content-bg-color-alt2;
     .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
       line-height: 20px;
     }
-
-    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
-    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-      padding: 0;
-    }
   }
 
   @if $skin-name == 'bootstrap5' {
@@ -96777,7 +96793,7 @@ $pv-comment-text-cursor-color: $black !default;
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
     border-bottom: 0;
-    word-break: break-all;
+    word-break: break-word;
   }
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper {
@@ -111109,6 +111125,11 @@ $schedule-tree-content-color: $content-text-color-alt2;
         &:focus {
           background: $schedule-select-bg-color;
         }
+
+        &.e-template {
+          display: inline-flex;
+          flex-direction: row-reverse;
+        }
       }
 
       .e-subject-wrap {

package/SCSS-Themes/fluent.scss

@@ -14462,14 +14462,27 @@ $float-label-rtl-value: -10px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 
@@ -31618,6 +31631,7 @@ $tooltip-close-icon-border-hover: $secondary-border-color-hover !default;
 
     /*! tooltip content area */
     .e-tip-content {
+      border-radius: inherit;
       color: $tooltip-content-font-color;
       font-family: $font-family;
       font-size: $tooltip-font-size;
@@ -60938,7 +60952,8 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
 @include export-module('listbox-layout') {
   /* stylelint-disable property-no-vendor-prefix */
   .e-listbox-wrapper,
-  .e-listbox-container {
+  .e-listbox-container,
+  .e-listboxtool-wrapper {
     -webkit-overflow-scrolling: touch;
     box-sizing: border-box;
     cursor: pointer;
@@ -61251,7 +61266,8 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
   }
 
   .e-listbox-wrapper.e-sortableclone,
-  .e-listbox-container.e-sortableclone {
+  .e-listbox-container.e-sortableclone,
+  .e-listboxtool-wrapper.e-sortableclone {
     border-width: 0;
     overflow: visible;
 
@@ -61284,6 +61300,10 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
     }
   }
 
+  .e-listboxtool-wrapper.e-sortableclone{
+    display: block;
+  }
+
   .e-listboxtool-wrapper,
   .e-listboxtool-container {
     cursor: pointer;
@@ -61518,7 +61538,8 @@ $listbox-filter-bigger-height: calc(100% - 65px) !default;
   }
 
   .e-listbox-wrapper,
-  .e-listbox-container {
+  .e-listbox-container,
+  .e-listboxtool-wrapper {
     font-family: $listbox-font-family;
     font-size: $listbox-font-size;
     @at-root {
@@ -85655,11 +85676,6 @@ $rte-tbar-default-bg: $content-bg-color-alt2;
     .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
       line-height: 20px;
     }
-
-    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
-    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-      padding: 0;
-    }
   }
 
   @if $skin-name == 'bootstrap5' {
@@ -96778,7 +96794,7 @@ $pv-comment-text-cursor-color: $black !default;
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
     border-bottom: 0;
-    word-break: break-all;
+    word-break: break-word;
   }
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper {
@@ -111110,6 +111126,11 @@ $schedule-tree-content-color: $content-text-color-alt2;
         &:focus {
           background: $schedule-select-bg-color;
         }
+
+        &.e-template {
+          display: inline-flex;
+          flex-direction: row-reverse;
+        }
       }
 
       .e-subject-wrap {

package/SCSS-Themes/highcontrast.scss

@@ -14302,14 +14302,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 
@@ -31213,6 +31226,7 @@ $tooltip-tip-right-width: 8px !default;
 
     /*! tooltip content area */
     .e-tip-content {
+      border-radius: inherit;
       color: $tooltip-content-font-color;
       font-family: $font-family;
       font-size: $tooltip-font-size;
@@ -60478,7 +60492,8 @@ $listbox-filter-bigger-height: calc(100% - 59px) !default;
 @include export-module('listbox-layout') {
   /* stylelint-disable property-no-vendor-prefix */
   .e-listbox-wrapper,
-  .e-listbox-container {
+  .e-listbox-container,
+  .e-listboxtool-wrapper {
     -webkit-overflow-scrolling: touch;
     box-sizing: border-box;
     cursor: pointer;
@@ -60791,7 +60806,8 @@ $listbox-filter-bigger-height: calc(100% - 59px) !default;
   }
 
   .e-listbox-wrapper.e-sortableclone,
-  .e-listbox-container.e-sortableclone {
+  .e-listbox-container.e-sortableclone,
+  .e-listboxtool-wrapper.e-sortableclone {
     border-width: 0;
     overflow: visible;
 
@@ -60824,6 +60840,10 @@ $listbox-filter-bigger-height: calc(100% - 59px) !default;
     }
   }
 
+  .e-listboxtool-wrapper.e-sortableclone{
+    display: block;
+  }
+
   .e-listboxtool-wrapper,
   .e-listboxtool-container {
     cursor: pointer;
@@ -61058,7 +61078,8 @@ $listbox-filter-bigger-height: calc(100% - 59px) !default;
   }
 
   .e-listbox-wrapper,
-  .e-listbox-container {
+  .e-listbox-container,
+  .e-listboxtool-wrapper {
     font-family: $listbox-font-family;
     font-size: $listbox-font-size;
     @at-root {
@@ -85038,11 +85059,6 @@ $rte-big-toolbar-item-frist-last-child-margin: 0 6px;
     .e-richtexteditor .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
       line-height: 20px;
     }
-
-    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn,
-    .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-btn.e-control {
-      padding: 0;
-    }
   }
 
   @if $skin-name == 'bootstrap5' {
@@ -96165,7 +96181,7 @@ $pv-eye-icon-margin-top: 3px !default;
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
     border-bottom: 0;
-    word-break: break-all;
+    word-break: break-word;
   }
 
   .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper {
@@ -110458,6 +110474,11 @@ $schedule-tree-content-color: #fff !default;
         &:focus {
           background: $schedule-select-bg-color;
         }
+
+        &.e-template {
+          display: inline-flex;
+          flex-direction: row-reverse;
+        }
       }
 
       .e-subject-wrap {

package/SCSS-Themes/inputs/input/bootstrap-dark.scss

@@ -11339,14 +11339,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/bootstrap.scss

@@ -11330,14 +11330,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/bootstrap4.scss

@@ -11335,14 +11335,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/bootstrap5-dark.scss

@@ -11346,14 +11346,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/bootstrap5.scss

@@ -11346,14 +11346,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/fabric-dark.scss

@@ -11329,14 +11329,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/fabric.scss

@@ -11321,14 +11321,27 @@ $float-label-rtl-value: -7px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/fluent-dark.scss

@@ -11348,14 +11348,27 @@ $float-label-rtl-value: -10px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }
 

package/SCSS-Themes/inputs/input/fluent.scss

@@ -11348,14 +11348,27 @@ $float-label-rtl-value: -10px !default;
     outline: none;
   }
 
-  .e-input-group.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-prepend input,
-  .e-input-group.e-control-wrapper.e-prepend input.e-input,
-  .e-float-input.e-input-group.e-control-wrapper.e-prepend input,
-  .e-float-input.e-prepend input,
-  .e-float-input.e-control-wrapper.e-prepend input {
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
     @if $input-skin-name == 'material' {
       border-bottom: 1px solid;
+      border-bottom-color: $input-box-border-color;
+    }
+  }
+
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $error-font-color;
+    }
+  }
+
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
+  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
+    @if $input-skin-name == 'material' {
+      border-bottom: 1px solid;
+      border-bottom-color: $success-font-color;
     }
   }