@syncfusion/ej2-inputs 25.2.6 → 26.1.35

package/styles/input/_theme.scss

@@ -25,6 +25,9 @@
   .e-float-input.e-input-group.e-control-wrapper {
     background: $input-bg-color;
     color: $input-font-color;
+    @if $input-skin-name == 'fluent2' {
+      border-bottom-color: $input-border-bottom-color;
+    }
   }
 
   .e-input-group .e-input-group-icon,
@@ -35,13 +38,17 @@
     @if ($input-skin-name == 'FluentUI') {
       border-color: $input-group-icon-border-color;
     }
-    @if ($input-skin-name == 'Material3') {
+    @if ($input-skin-name == 'Material3' or $input-skin-name == 'fluent2') {
       margin: 0;
     }
   }
 
   .e-input-group.e-disabled .e-input-group-icon,
-  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
+  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon,
+  .e-float-input.e-disabled .e-clear-icon,
+  .e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
+  .e-input-group.e-disabled .e-clear-icon,
+  .e-input-group.e-control-wrapper.e-disabled .e-clear-icon {
     color: $input-group-disabled-color;
   }
 
@@ -63,7 +70,7 @@
     }
     background: $input-disable-bg-color;
     color: $input-disable-font-color;
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
       background-position: bottom -1px left 0;
       background-repeat: repeat-x;
@@ -157,7 +164,7 @@
     @if $input-skin-name == 'highcontrast' {
       border-color: $input-group-border-color-hover;
     }
-    @if $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       border: $input-icon-hover-border;
       background: $input-icon-hover-bg-color;
     }
@@ -166,7 +173,7 @@
 
   .e-input-group.e-disabled .e-input-group-icon:hover,
   .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon:hover {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background: transparent;
     }
   }
@@ -253,7 +260,9 @@
   .e-float-input input,
   .e-float-input textarea,
   .e-float-input.e-control-wrapper input,
-  .e-float-input.e-control-wrapper textarea {
+  .e-float-input.e-control-wrapper textarea,
+  .e-input-group,
+  .e-input-group.e-control-wrapper {
     border-bottom-color: $input-box-border-color;
   }
 
@@ -284,25 +293,7 @@
   .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'highcontrast' {
-      color: $content-font-alt;
-    }
-  }
-
-  .e-float-input:not(.e-input-group) .e-float-line::before,
-  .e-float-input:not(.e-input-group) .e-float-line::after,
-  .e-float-input:not(.e-input-group) .e-float-line::before,
-  .e-float-input:not(.e-input-group) .e-float-line::after,
-  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
-  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after,
-  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
-  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      background: $input-active-accent-color;
-    }
-  }
-
+  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   label.e-float-text,
   .e-float-input label.e-float-text,
   .e-float-input.e-control-wrapper label.e-float-text,
@@ -325,12 +316,7 @@
   .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
-    @if $input-skin-name == 'highcontrast' {
-      color: $content-font-alt;
-    }
-  }
-
+  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -350,12 +336,25 @@
   .e-small .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
+  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     @if $input-skin-name == 'highcontrast' {
       color: $content-font-alt;
     }
   }
 
+  .e-float-input:not(.e-input-group) .e-float-line::before,
+  .e-float-input:not(.e-input-group) .e-float-line::after,
+  .e-float-input:not(.e-input-group) .e-float-line::before,
+  .e-float-input:not(.e-input-group) .e-float-line::after,
+  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
+  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after,
+  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
+  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      background: $input-active-accent-color;
+    }
+  }
+
   .e-float-input.e-success:not(.e-input-group) .e-float-line::before,
   .e-float-input.e-success:not(.e-input-group) .e-float-line::after,
   .e-float-input.e-success:not(.e-input-group) .e-float-line::before,
@@ -364,7 +363,7 @@
   .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::after,
   .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::before,
   .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background: $input-success-color;
     }
   }
@@ -377,14 +376,45 @@
   .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::after,
   .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::before,
   .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::after  {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background: $input-warning-color;
     }
   }
 
   .e-float-input:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
   .e-float-input:not(.e-error):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
-  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
+  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
+  input.e-input#{$css}:-moz-placeholder,
+  .e-input-group input.e-input:-moz-placeholder,
+  .e-input-group input.e-input:-moz-placeholder,
+  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder,
+  input.e-input#{$css}:-moz-placeholder,
+  .e-input-group input.e-input:-moz-placeholder,
+  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder,
+  textarea.e-input#{$css}:-moz-placeholder,
+  .e-input-group textarea.e-input:-moz-placeholder,
+  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder,
+  input.e-input#{$css}::-moz-placeholder,
+  .e-input-group input.e-input::-moz-placeholder,
+  .e-input-group.e-control-wrapper input.e-input::-moz-placeholder,
+  textarea.e-input#{$css}::-moz-placeholder,
+  .e-input-group textarea.e-input::-moz-placeholder,
+  .e-input-group.e-control-wrapper textarea.e-input::-moz-placeholder,
+  input.e-input#{$css}:-ms-input-placeholder,
+  .e-input-group input.e-input:-ms-input-placeholder,
+  .e-input-group.e-control-wrapper input.e-input:-ms-input-placeholder,
+  textarea.e-input#{$css}:-ms-input-placeholder,
+  .e-input-group.e-control-wrapper textarea.e-input:-ms-input-placeholder,
+  .e-input-group textarea.e-input:-ms-input-placeholder,
+  input.e-input#{$css}::-webkit-input-placeholder,
+  .e-input-group.e-control-wrapper input.e-input::-webkit-input-placeholder,
+  .e-input-group input.e-input::-webkit-input-placeholder,
+  textarea.e-input#{$css}::-webkit-input-placeholder,
+  .e-input-group textarea.e-input::-webkit-input-placeholder,
+  .e-input-group.e-control-wrapper textarea.e-input::-webkit-input-placeholder,
+  .e-float-input:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
+  .e-float-input:not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
+  .e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
     color: $input-placeholder;
   }
 
@@ -396,7 +426,7 @@
   .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::after,
   .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::before,
   .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background: $input-error-color;
     }
   }
@@ -423,68 +453,37 @@
   .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
   .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
   .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
-  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover {
+  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
+  .e-float-input.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
+  .e-float-input.e-control-wrapper.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
+  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
+  .e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
+  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
+  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:last-child:hover,
+  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
+  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
+  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover,
+  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover,
+  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover,
+  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover {
     @if $input-skin-name == 'highcontrast' {
       border-right-color: transparent;
+      background-color: $input-hover-bg-color;
     }
   }
 
   .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
   .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
   .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
-  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-left-color: transparent;
-    }
-  }
-
-  .e-float-input.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
-  .e-float-input.e-control-wrapper.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-right-color: transparent;
-    }
-  }
-
+  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
   .e-input-group.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
-  .e-input-group.e-control-wrapper.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-left-color: transparent;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
   .e-input-group.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
   .e-input-group.e-float-icon-left .e-input-group-icon:first-child:hover,
   .e-input-group.e-control-wrapper.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
-  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:first-child:hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-left-color: transparent;
-    }
-  }
-
-  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
-  .e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
-  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
-  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:last-child:hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-right-color: transparent;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:first-child:hover,
   .e-input-group.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
-  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-left-color: transparent;
-    }
-  }
-
-  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
-  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-right-color: transparent;
-    }
-  }
-
-  
+  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
   .e-input-group:not(.e-disabled) .e-input-group-icon:first-child:hover,
   .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:first-child:hover {
     @if $input-skin-name == 'highcontrast' {
@@ -492,22 +491,6 @@
     }
   }
 
-  
-  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover,
-  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-right-color: transparent;
-    }
-  }
-
-  
-  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover,
-  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover {
-    @if $input-skin-name == 'highcontrast' {
-      border-right-color: transparent;
-    }
-  }
-
   input.e-input#{$css}::selection,
   textarea.e-input#{$css}::selection,
   .e-input-group input.e-input::selection,
@@ -517,151 +500,12 @@
   .e-input-group textarea.e-input::selection,
   .e-input-group.e-control-wrapper textarea.e-input::selection,
   .e-float-input textarea::selection,
-  .e-float-input.e-control-wrapper textarea::selection {
-    @include input-selection;
-  }
-
+  .e-float-input.e-control-wrapper textarea::selection,
   .e-float-input.e-small textarea::selection,
   .e-float-input textarea::selection {
     @include input-selection;
   }
 
-  
-  input.e-input#{$css}:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group input.e-input:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group input.e-input:-moz-placeholder,
-  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  input.e-input#{$css}:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group input.e-input:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  textarea.e-input#{$css}:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group textarea.e-input:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  input.e-input#{$css}::-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group input.e-input::-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper input.e-input::-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  textarea.e-input#{$css}::-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group textarea.e-input::-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper textarea.e-input::-moz-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  input.e-input#{$css}:-ms-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group input.e-input:-ms-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper input.e-input:-ms-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  textarea.e-input#{$css}:-ms-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper textarea.e-input:-ms-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group textarea.e-input:-ms-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  input.e-input#{$css}::-webkit-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper input.e-input::-webkit-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group input.e-input::-webkit-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  textarea.e-input#{$css}::-webkit-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group textarea.e-input::-webkit-input-placeholder {
-    color: $input-placeholder;
-  }
-
-  
-  .e-input-group.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
-    color: $input-placeholder;
-  }
-
   .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
   .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
   .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
@@ -669,12 +513,7 @@
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
-  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-animation-bg;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
   .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
   .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
   .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
@@ -682,12 +521,29 @@
   .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
   .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
-  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
+  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after,
+  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
+  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-group-animation-bg;
     }
   }
 
+  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
+  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
+  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
+  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
+    @if $input-skin-name == 'fluent2' {
+      border-top: $input-active-border-color;
+    }
+  }
+
   .e-input-group::before,
   .e-input-group::after,
   .e-input-group.e-control-wrapper::before,
@@ -704,12 +560,7 @@
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-success::before,
   .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-success::after,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::before,
-  .e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::after  {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-success-animation-bg;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::after,
   .e-float-input.e-input-group:not(.e-float-icon-left).e-success .e-float-line::before,
   .e-float-input.e-input-group:not(.e-float-icon-left).e-success .e-float-line::after,
   .e-float-input.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
@@ -721,8 +572,18 @@
   .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-success .e-float-line::before,
   .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-success .e-float-line::after,
   .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
-  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after,
+  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::after,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::after,
+  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::before,
+  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::after,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::before,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::after,
+  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::before,
+  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::after  {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-group-success-animation-bg;
     }
   }
@@ -743,17 +604,18 @@
   .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-warning:not(.e-float-input)::before,
   .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-warning:not(.e-float-input)::after,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::before,
-  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-warning-animation-bg;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::after,
   .e-float-input.e-input-group:not(.e-float-icon-left).e-warning .e-float-line::before,
   .e-float-input.e-input-group:not(.e-float-icon-left).e-warning .e-float-line::after,
   .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-input-in-wrap .e-float-line::before,
-  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-input-in-wrap .e-float-line::after,
+  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::after,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::after,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::before,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::after {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-group-warning-animation-bg;
     }
   }
@@ -774,12 +636,7 @@
   .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::before,
   .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::after,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::before,
-  .e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-error-animation-bg;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after,
   .e-float-input.e-input-group:not(.e-float-icon-left).e-error .e-float-line::before,
   .e-float-input.e-input-group:not(.e-float-icon-left).e-error .e-float-line::after,
   .e-float-input.e-input-group.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::before,
@@ -787,8 +644,16 @@
   .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error .e-float-line::before,
   .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error .e-float-line::after,
   .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::before,
-  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::after,
+  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::after,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::before,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::after,
+  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::before,
+  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::after,
+  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::before,
+  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::after {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-group-error-animation-bg;
     }
   }
@@ -803,36 +668,18 @@
   }
 
   .e-input-group.e-success .e-input-group-icon,
-  .e-input-group.e-control-wrapper.e-success .e-input-group-icon {
-    color: $input-icon-font-color;
-  }
-
-  .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-  .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover {
-    color: $input-icon-font-color;
-    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
-      color: $input-group-hovered-color;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-success .e-input-group-icon,
   .e-input-group.e-warning .e-input-group-icon,
-  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon {
-    color: $input-icon-font-color;
-  }
-
-  .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover {
-    color: $input-icon-font-color;
-    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
-      color: $input-group-hovered-color;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
   .e-input-group.e-error .e-input-group-icon,
   .e-input-group.e-control-wrapper.e-error .e-input-group-icon {
     color: $input-icon-font-color;
   }
 
+  .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
+  .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
+  .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
+  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
   .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
   .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
     color: $input-icon-font-color;
@@ -842,22 +689,12 @@
   }
 
   .e-input-group.e-success:not(.e-disabled) .e-input-group-icon:active,
-  .e-input-group.e-control-wrapper.e-success:not(.e-disabled) .e-input-group-icon:active {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-icon-font-color;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-success:not(.e-disabled) .e-input-group-icon:active,
   .e-input-group.e-warning:not(.e-disabled) .e-input-group-icon:active,
-  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled) .e-input-group-icon:active {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-icon-font-color;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled) .e-input-group-icon:active,
   .e-input-group.e-error:not(.e-disabled) .e-input-group-icon:active,
   .e-input-group.e-control-wrapper.e-error:not(.e-disabled) .e-input-group-icon:active {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $input-icon-font-color;
     }
   }
@@ -865,10 +702,20 @@
   .e-input-group input.e-input,
   .e-input-group.e-control-wrapper input.e-input,
   .e-input-group textarea.e-input,
-  .e-input-group.e-control-wrapper textarea.e-input {
+  .e-input-group.e-control-wrapper textarea.e-input,
+  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
+  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
+  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
+  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
     border-color: $input-box-border-color;
   }
 
+  .e-bigger .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error) {
+    @if $input-skin-name == 'fluent2' {
+      padding-bottom: 0;
+    }
+  }
+
   
   .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error),
   .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
@@ -877,7 +724,9 @@
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
   .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
-    border-color: $input-active-border-color;
+    @if $input-skin-name != 'fluent2' {
+      border-color: $input-active-border-color;
+    }
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
       -webkit-box-shadow: $input-border-shadow;
       box-shadow: $input-border-shadow;
@@ -889,9 +738,13 @@
     @if $input-skin-name == 'bootstrap4'  {
       transition: $input-transition-shadow;
     }
+    @if $input-skin-name == 'fluent2' {
+      border-bottom-color: $input-active-border-color;
+      padding-bottom: 2px;
+      border-bottom-width: 2px;
+    }
   }
 
-  
   .e-input-group .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
   .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
@@ -911,7 +764,11 @@
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
   .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
-  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input {
+  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
+  .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error,
+  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error,
+  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
+  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
       -webkit-box-shadow: $input-error-border-shadow;
       box-shadow: $input-error-border-shadow;
@@ -939,7 +796,11 @@
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
   .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
-  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input {
+  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
+  .e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning,
+  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning,
+  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
+  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
       -webkit-box-shadow: $input-warning-border-shadow;
       box-shadow: $input-warning-border-shadow;
@@ -969,16 +830,27 @@
   }
 
   .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
-  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
+  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
+  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
+  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
+  .e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
+  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $input-group-border-color-focus;
     }
   }
 
-   
   .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
       border-color: $input-group-border-color-focus;
     }
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
@@ -995,40 +867,16 @@
     }
   }
 
-   
-  .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error,
-  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
-      -webkit-box-shadow: $input-error-border-shadow;
-      box-shadow: $input-error-border-shadow;
-    }
-  }
-
-   
   .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
-  .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success {
+  .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success,
+  .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
+  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
       -webkit-box-shadow: $input-success-border-shadow;
       box-shadow: $input-success-border-shadow;
     }
   }
 
-   
-  .e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning,
-  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
-      -webkit-box-shadow: $input-warning-border-shadow;
-      box-shadow: $input-warning-border-shadow;
-    }
-  }
-
-  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
-  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
-  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
-  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
-    border-color: $input-box-border-color;
-  }
-
   .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
   .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
@@ -1064,6 +912,17 @@
     }
   }
 
+  .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-input-focus,
+  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus,
+  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-input-focus,
+  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus,
+  .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus,
+  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus {
+    @if $input-skin-name == 'fluent2' {
+      border-bottom-color: $input-group-focus-border-bottom-color;
+    }
+  }
+
   .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
   .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
   .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
@@ -1073,11 +932,14 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $input-group-full-border-color;
     }
+    @else if $input-skin-name == 'fluent2' {
+      border-bottom-color: $input-group-full-border-bottom-color;
+    }
   }
 
   .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
       border-color: $input-group-full-border-color;
     }
     @if $input-skin-name == 'tailwind' {
@@ -1103,30 +965,6 @@
     }
   }
 
-  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
-  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
-      -webkit-box-shadow: $input-error-border-shadow;
-      box-shadow: $input-error-border-shadow;
-    }
-  }
-
-  .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
-  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
-      -webkit-box-shadow: $input-success-border-shadow;
-      box-shadow: $input-success-border-shadow;
-    }
-  }
-
-  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
-  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
-      -webkit-box-shadow: $input-warning-border-shadow;
-      box-shadow: $input-warning-border-shadow;
-    }
-  }
-
   .e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
     @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
@@ -1134,11 +972,6 @@
     }
   }
 
-  .e-input-group,
-  .e-input-group.e-control-wrapper {
-    border-bottom-color: $input-box-border-color;
-  }
-
   .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input:focus,
   .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input:focus,
@@ -1147,7 +980,7 @@
   .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       border-bottom-color: transparent;
       border-top-color: transparent;
     }
@@ -1191,7 +1024,7 @@
 
   .e-input-group.e-float-icon-left.e-success .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-state-color ($input-group-success-color);
     }
   }
@@ -1205,7 +1038,7 @@
 
   .e-input-group.e-float-icon-left.e-warning .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-warning .e-input-in-wrap {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-state-color ($input-group-warning-color);
     }
   }
@@ -1219,7 +1052,7 @@
 
   .e-input-group.e-float-icon-left.e-error .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-state-color ($input-group-error-color);
     }
   }
@@ -1248,7 +1081,7 @@
     @if ($input-skin-name == 'FluentUI') {
       background: $input-clear-icon-hover-bg-color;
     }
-    @if $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       border: $input-clear-icon-hover-border;
       background: $input-clear-icon-hover-bg-color;
     }
@@ -1266,14 +1099,6 @@
     }
   }
 
-  .e-float-input.e-disabled .e-clear-icon,
-  .e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
-  .e-input-group.e-disabled .e-clear-icon,
-  .e-input-group.e-control-wrapper.e-disabled .e-clear-icon {
-    color: $input-group-disabled-color;
-  }
-
-  // Double border issue while adding floating input with class .e-input
   .e-float-input.e-input-focus .e-input:focus,
   .e-float-input.e-control-wrapper.e-input-focus .e-input:focus {
     border-bottom-color: transparent;
@@ -1298,32 +1123,7 @@
   .e-bigger .e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text {
-    color: $float-label-font-color;
-  }
-
-  .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
-    color: $float-label-font-color;
-  }
-
+  .e-bigger .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
   .e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
   .e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
@@ -1347,10 +1147,7 @@
   .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-small .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    color: $float-label-font-color;
-  }
-
+  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
@@ -1374,36 +1171,7 @@
   .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    color: $float-label-font-color;
-  }
-
-  .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-small .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    color: $input-header-font-color;
-    @if $input-skin-name == 'highcontrast' {
-      color: $input-placeholder;
-    }
-  }
-
-  .e-float-input:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
-  .e-float-input:not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
-  .e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
-    color: $input-placeholder;
-  }
-
+  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
   .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
@@ -1419,29 +1187,7 @@
   .e-bigger .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-bigger .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
-    color: $float-label-font-color;
-  }
-
-  .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper:not(.e-error) textarea label.e-float-text.e-label-top,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
-    color: $float-label-font-color;
-  }
-
+  .e-bigger .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
   .e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
@@ -1461,10 +1207,105 @@
   .e-bigger .e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-bigger .e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
+  .e-bigger .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
     color: $float-label-font-color;
   }
 
+  .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper:not(.e-error) textarea label.e-float-text.e-label-top,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
+    @if $input-skin-name != 'fluent2' {
+      color: $float-label-font-color;
+    }
+    @else {
+      color: $float-label-top-font-color;
+    }
+  }
+
+  .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
+    color: $input-header-font-color;
+    @if $input-skin-name == 'highcontrast' {
+      color: $input-placeholder;
+    }
+  }
+
   .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
@@ -1501,10 +1342,7 @@
   .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
   .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    color: $float-label-disbale-font-color;
-  }
-
+  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-float-input textarea[disabled] ~ label.e-float-text,
   .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
@@ -1514,10 +1352,7 @@
   .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
   .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
   .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
-    color: $float-label-disbale-font-color;
-  }
-
+  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
   .e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
   .e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
   .e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
@@ -1541,10 +1376,7 @@
   .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    color: $float-label-disbale-font-color;
-  }
-
+  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
@@ -1664,7 +1496,7 @@
   .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $input-active-accent-color;
     }
   }
@@ -1692,6 +1524,27 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $input-group-border-color-hover;
     }
+    @else if $input-skin-name == 'fluent2' {
+      border-bottom-color: $input-group-full-border-bottom-color;
+    }
+  }
+
+  .e-underline.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-underline.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-underline.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
+  .e-underline.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-underline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-underline.e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
+  .e-underline.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
+  .e-underline.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
+  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
+  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
+  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover {
+    @if $input-skin-name == 'fluent' {
+      border-color: $input-group-border-color-hover;
+    }
   }
 
   .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
@@ -1702,7 +1555,7 @@
   .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI' and $input-skin-name != 'fluent2' {
       border-color: $input-group-border-color-hover;
     }
   }
@@ -1720,23 +1573,6 @@
     }
   }
 
-  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
-  .e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
-  .e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
-  .e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
-  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
-  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
-  .e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
-  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
-  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $input-group-border-color-focus;
-    }
-  }
-
   .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
@@ -1745,7 +1581,7 @@
   .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
   .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
   .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
       border-color: $input-group-border-color-focus;
     }
   }
@@ -1768,12 +1604,7 @@
   .e-float-input.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
   .e-float-input.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
-  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $input-group-border-color-hover;
-    }
-  }
-
+  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
   .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
@@ -1791,46 +1622,6 @@
     }
   }
 
-  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
-    color: $float-label-font-color;
-  }
-
-  .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
-    color: $float-label-font-color;
-  }
-
-  // Outline textbox
-
   .e-outline.e-input-group,
   .e-outline.e-input-group.e-control-wrapper,
   .e-outline.e-float-input,
@@ -1867,6 +1658,34 @@
     }
   }
 
+  .e-underline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-input-group.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-input-group.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-input-group.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+    @if $input-skin-name == 'fluent2' {
+      border-color: $outline-hover-border-color;
+      color: $outline-hover-font-color;
+    }
+  }
+
+  .e-underline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-input-group.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-input-group.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-input-group.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-underline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
+    @if $input-skin-name == 'fluent2' {
+      border-bottom-color: $underline-hover-border-color;
+      color: $outline-hover-font-color;
+    }
+  }
+
   .e-outline.e-input-group.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
   .e-outline.e-input-group.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
   .e-outline.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
@@ -1936,7 +1755,10 @@
   .e-outline.e-float-input.e-input-group.e-error.e-input-focus,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus,
   .e-outline.e-float-input.e-input-group.e-error.e-input-focus:not(.e-float-icon-left),
-  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus:not(.e-float-icon-left) {
+  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus:not(.e-float-icon-left),
+  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus),
+  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
+  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-top-color: transparent;
     }
@@ -2020,7 +1842,19 @@
   .e-outline.e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
   .e-outline.e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
   .e-outline.e-input-group.e-disabled.e-float-icon-left:not(.e-input-focus),
-  .e-outline.e-input-group.e-disabled.e-control-wrapper.e-float-icon-left:not(.e-input-focus) {
+  .e-outline.e-input-group.e-disabled.e-control-wrapper.e-float-icon-left:not(.e-input-focus),
+  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
+  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
+  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
+  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
+  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
+  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
+  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
+  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
+  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::before,
+  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
+  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
+  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-color: $outline-disabled-border-color;
     }
@@ -2222,31 +2056,6 @@
     }
   }
 
-  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus),
-  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
-  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-top-color: transparent;
-    }
-  }
-
-  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
-  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
-  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
-  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
-  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
-  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
-  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
-  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
-  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::before,
-  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
-  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
-  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $outline-disabled-border-color;
-    }
-  }
-
   .e-outline.e-float-input.e-input-group.e-disabled .e-float-text,
   .e-outline.e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
   .e-outline.e-float-input input[disabled] ~ label.e-float-text,
@@ -2260,12 +2069,7 @@
   .e-outline.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $outline-float-label-disbale-font-color;
-    }
-  }
-
+  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input textarea[disabled] ~ label.e-float-text,
   .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
@@ -2275,12 +2079,7 @@
   .e-outline.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $outline-float-label-disbale-font-color;
-    }
-  }
-
+  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
@@ -2304,12 +2103,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $outline-float-label-disbale-font-color;
-    }
-  }
-
+  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
@@ -2342,8 +2136,6 @@
     }
   }
 
-  // Outline input clear icon
-
   .e-outline.e-float-input:not(.e-disabled) .e-clear-icon:hover,
   .e-outline.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
   .e-outline.e-input-group:not(.e-disabled) .e-clear-icon:hover,
@@ -2362,15 +2154,13 @@
     }
   }
 
-  // Filled input background color changes
-
   .e-filled.e-input-group,
   .e-filled.e-input-group.e-control-wrapper,
   .e-filled.e-float-input,
   .e-filled.e-float-input.e-input-group,
   .e-filled.e-float-input.e-control-wrapper,
   .e-filled.e-float-input.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background: $filled-input-bg-color;
       transition: $background-color-transition;
     }
@@ -2382,7 +2172,7 @@
   .e-filled.e-float-input.e-input-group:hover,
   .e-filled.e-float-input.e-control-wrapper:hover,
   .e-filled.e-float-input.e-input-group.e-control-wrapper:hover {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background: $filled-input-overlay-focused-bg-color;
       transition: $background-color-transition;
     }
@@ -2400,57 +2190,52 @@
   .e-filled.e-float-input:hover.e-input-group.e-input-focus,
   .e-filled.e-float-input:hover.e-control-wrapper.e-input-focus,
   .e-filled.e-float-input:hover.e-input-group.e-control-wrapper.e-input-focus {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       background: $filled-input-overlay-activated-bg-color;
       transition: $background-color-transition;
     }
   }
 
-  // Filled input border color changes
-
   .e-filled.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $filled-input-hover-border-color;
-    }
-  }
-
+  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $filled-input-hover-border-color;
-    }
-  }
-
+  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
   .e-filled.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
-  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $filled-input-hover-border-color;
-    }
-  }
-
-  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error),
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $input-group-full-border-color;
-    }
-  }
+  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
+  .e-filled.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
+  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      border-color: $filled-input-hover-border-color;
+    }
+  }
 
+  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error),
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error),
   .e-filled.e-float-input:not(.e-success):not(.e-warning):not(.e-error),
   .e-filled.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       border-color: $input-group-full-border-color;
     }
   }
@@ -2459,7 +2244,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-success,
   .e-filled.e-input-group.e-float-icon-left.e-success,
   .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-success {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-state-color ($input-success-color);
     }
   }
@@ -2468,7 +2253,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-warning,
   .e-filled.e-input-group.e-float-icon-left.e-warning,
   .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-warning {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-state-color ($input-warning-color);
     }
   }
@@ -2477,13 +2262,11 @@
   .e-filled.e-float-input.e-control-wrapper.e-error,
   .e-filled.e-input-group.e-float-icon-left.e-error,
   .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-error {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       @include input-state-color ($input-error-color);
     }
   }
 
-  // Filled input floating label color configuration
-
   .e-filled label.e-float-text,
   .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -2498,8 +2281,87 @@
   .e-filled.e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-input-group.e-filled textarea.e-input:-ms-input-placeholder,
+  input.e-filled.e-input#{$css}::-webkit-input-placeholder,
+  .e-input-group.e-filled.e-control-wrapper input.e-input::-webkit-input-placeholder,
+  .e-input-group.e-filled input.e-input::-webkit-input-placeholder,
+  textarea.e-filled.e-input#{$css}::-webkit-input-placeholder,
+  .e-input-group.e-filled textarea.e-input::-webkit-input-placeholder,
+  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-webkit-input-placeholder,
+  .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
+  input.e-filled.e-input#{$css}:-moz-placeholder,
+  .e-input-group.e-filled input.e-input:-moz-placeholder,
+  .e-input-group.e-filled input.e-input:-moz-placeholder,
+  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder,
+  input.e-filled.e-input#{$css}:-moz-placeholder,
+  .e-input-group.e-filled input.e-input:-moz-placeholder,
+  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder,
+  textarea.e-filled.e-input#{$css}:-moz-placeholder,
+  .e-input-group.e-filled textarea.e-input:-moz-placeholder,
+  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-moz-placeholder,
+  input.e-filled.e-input#{$css}::-moz-placeholder,
+  .e-input-group.e-filled input.e-input::-moz-placeholder,
+  .e-input-group.e-filled.e-control-wrapper input.e-input::-moz-placeholder,
+  textarea.e-filled.e-input#{$css}::-moz-placeholder,
+  .e-input-group.e-filled textarea.e-input::-moz-placeholder,
+  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-moz-placeholder,
+  input.e-filled.e-input#{$css}:-ms-input-placeholder,
+  .e-input-group.e-filled input.e-input:-ms-input-placeholder,
+  .e-input-group.e-filled.e-control-wrapper input.e-input:-ms-input-placeholder,
+  textarea.e-filled.e-input#{$css}:-ms-input-placeholder,
+  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $filled-input-float-label-color;
     }
   }
@@ -2512,7 +2374,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $input-error-color;
     }
   }
@@ -2524,8 +2386,113 @@
   .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input .e-control-wrapper.e-success input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
+  .e-small .e-filled.e-float-input.e-success input[readonly] ~ label.e-float-text.e-label-top,
+  .e-small .e-filled.e-float-input.e-success input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-float-text.e-label-top,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $input-success-color;
     }
   }
@@ -2537,85 +2504,132 @@
   .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
-  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input .e-control-wrapper.e-warning input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
+  .e-small .e-filled.e-float-input.e-warning input[readonly] ~ label.e-float-text.e-label-top,
+  .e-small .e-filled.e-float-input.e-warning input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-warning input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-small .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      color: $input-warning-color;
+    }
+  }
+
+  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
+  .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
@@ -2638,12 +2652,7 @@
   .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
@@ -2667,12 +2676,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -2686,20 +2690,10 @@
   .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
   .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
-  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
+  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
   .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
@@ -2715,12 +2709,7 @@
   .e-bigger .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
@@ -2736,12 +2725,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
@@ -2761,12 +2745,7 @@
   .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
@@ -2787,7 +2766,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $filled-input-float-label-color;
     }
   }
@@ -2888,915 +2867,199 @@
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $input-active-accent-color;
     }
   }
-
-  .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  input.e-filled.e-input#{$css}:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
   
-  .e-input-group.e-filled input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
+  .e-input-group textarea.e-input:-ms-input-placeholder,
+  .e-input-group textarea.e-input:-moz-placeholder,
+  .e-input-group .e-input:-ms-input-placeholder,
+  input.e-input#{$css}::-webkit-input-placeholder {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
+      color: $input-placeholder-color;
     }
   }
 
-  
-  .e-input-group.e-filled input.e-input:-moz-placeholder,
-  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
+  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:hover,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
+  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:hover,
+  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      color: $filled-input-clear-icon-hover-color;
     }
   }
 
-  
-  input.e-filled.e-input#{$css}:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
+  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:active,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:active,
+  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:active,
+  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:active {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      color: $filled-input-clear-icon-active-color;
     }
   }
 
-  
-  .e-input-group.e-filled input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
+  .e-filled.e-input#{$css}[disabled],
+  .e-input-group.e-filled .e-input[disabled],
+  .e-input-group.e-filled.e-control-wrapper .e-input[disabled],
+  .e-input-group.e-filled.e-disabled,
+  .e-input-group.e-filled.e-control-wrapper.e-disabled,
+  .e-filled.e-float-input input[disabled],
+  .e-filled.e-float-input.e-control-wrapper input[disabled],
+  .e-filled.e-float-input textarea[disabled],
+  .e-filled.e-float-input.e-control-wrapper textarea[disabled],
+  .e-filled.e-float-input.e-disabled,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled {
+    @if $input-skin-name == 'material' {
+      background: $filled-input-disabled-bg-color;
+      background-image: none;
+      background-position: initial;
+      background-repeat: no-repeat;
+      background-size: $zero-value;
+      border-color: $filled-input-disabled-border-color;
+      color: $filled-input-disabled-font-color;
     }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-input#{$css}:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled textarea.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  input.e-filled.e-input#{$css}::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled input.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper input.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-input#{$css}::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled textarea.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  input.e-filled.e-input#{$css}:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled input.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper input.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-input#{$css}:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group textarea.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
-      color: $input-placeholder-color;
-    }
-  }
-
-  
-  .e-input-group textarea.e-input:-moz-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
-      color: $input-placeholder-color;
-    }
-  }
-
-  
-  .e-input-group .e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
-      color: $input-placeholder-color;
-    }
-  }
-
-  
-  input.e-input#{$css}::-webkit-input-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
-      color: $input-placeholder-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled textarea.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  input.e-filled.e-input#{$css}::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper input.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled input.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-input#{$css}::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled textarea.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-float-label-color;
-    }
-  }
-
-  // Filled input clear icon states
-
-  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:hover,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
-  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:hover,
-  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-clear-icon-hover-color;
-    }
-  }
-
-  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:active,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:active,
-  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:active,
-  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:active {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-clear-icon-active-color;
-    }
-  }
-
-  // Filled input disabled configuration
-
-  .e-filled.e-float-input.e-disabled .e-clear-icon,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
-  .e-input-group.e-filled.e-disabled .e-clear-icon,
-  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-clear-icon,
-  .e-input-group.e-filled.e-disabled .e-input-group-icon,
-  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-input-group-icon {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  .e-filled.e-input#{$css}[disabled],
-  .e-input-group.e-filled .e-input[disabled],
-  .e-input-group.e-filled.e-control-wrapper .e-input[disabled],
-  .e-input-group.e-filled.e-disabled,
-  .e-input-group.e-filled.e-control-wrapper.e-disabled,
-  .e-filled.e-float-input input[disabled],
-  .e-filled.e-float-input.e-control-wrapper input[disabled],
-  .e-filled.e-float-input textarea[disabled],
-  .e-filled.e-float-input.e-control-wrapper textarea[disabled],
-  .e-filled.e-float-input.e-disabled,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled {
-    @if $input-skin-name == 'material' {
-      background: $filled-input-disabled-bg-color;
-      background-image: none;
-      background-position: initial;
-      background-repeat: no-repeat;
-      background-size: $zero-value;
-      border-color: $filled-input-disabled-border-color;
-      color: $filled-input-disabled-font-color;
-    }
-    @if $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       //background: $filled-input-disabled-bg-color;
       background-image: none;
       background-position: initial;
       background-repeat: no-repeat;
-      background-size: $zero-value;
-      border-color: $filled-input-disabled-border-color;
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
-  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $filled-input-disabled-border-color;
-    }
-  }
-
-  .e-filled.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
-  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
-  .e-filled.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      background: $filled-input-disabled-bg-color;
-      background-image: none;
-      background-position: initial;
-      background-repeat: no-repeat;
-      background-size: $zero-value;
-      border-color: $filled-input-disabled-border-color;
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  .e-filled.e-float-input:not(.e-disabled) input[disabled],
-  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) input[disabled],
-  .e-filled.e-float-input:not(.e-disabled) textarea[disabled],
-  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) textarea[disabled] {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text,
-  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
-  .e-filled.e-float-input input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-disabled label.e-float-text,
-  .e-filled.e-float-input.e-disabled label.e-float-text.e-label-top,
-  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  .e-filled.e-float-input textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
-  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled textarea.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  input.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled input.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled textarea.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-moz-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  input.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled input.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled textarea.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  input.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled input.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  textarea.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled textarea.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  
-  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $filled-input-disabled-font-color;
-    }
-  }
-
-  // Filled input ripple action
-
-  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-animation-bg;
-    }
-  }
-
-  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
-  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-animation-bg;
-    }
-  }
-
-  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::after,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::after  {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-success-animation-bg;
-    }
-  }
-
-  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::before,
-  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::after,
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::before,
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::after,
-  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::before,
-  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-success-animation-bg;
-    }
-  }
-
-  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::after,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::after,
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::before,
-  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-warning-animation-bg;
-    }
-  }
-
-  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::after,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::before,
-  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-error-animation-bg;
-    }
-  }
-
-  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::before,
-  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::after,
-  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::before,
-  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      @include input-group-error-animation-bg;
-    }
-  }
-
-  .e-filled.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $filled-input-hover-border-color;
-    }
-  }
-
-  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $filled-input-hover-border-color;
-    }
-  }
-
-  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
-  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-color: $filled-input-hover-border-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input .e-control-wrapper.e-success input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
-  .e-small .e-filled.e-float-input.e-success input[readonly] ~ label.e-float-text.e-label-top,
-  .e-small .e-filled.e-float-input.e-success input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
+      background-size: $zero-value;
+      border-color: $filled-input-disabled-border-color;
+      color: $filled-input-disabled-font-color;
     }
   }
 
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-float-text.e-label-top,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
+  .e-filled.e-float-input.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
+  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      border-color: $filled-input-disabled-border-color;
+    }
+  }
+
+  .e-filled.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
+  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
+  .e-filled.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
+  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      background: $filled-input-disabled-bg-color;
+      background-image: none;
+      background-position: initial;
+      background-repeat: no-repeat;
+      background-size: $zero-value;
+      border-color: $filled-input-disabled-border-color;
+      color: $filled-input-disabled-font-color;
+    }
+  }
+
+  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text,
+  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
+  .e-filled.e-float-input input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-disabled label.e-float-text,
+  .e-filled.e-float-input.e-disabled label.e-float-text.e-label-top,
+  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
+  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder,
+  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
+  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder,
+  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder,
+  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder,
+  textarea.e-filled.e-disabled.e-input#{$css}:-moz-placeholder,
+  .e-input-group.e-filled.e-disabled textarea.e-input:-moz-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-moz-placeholder,
+  input.e-filled.e-disabled.e-input#{$css}::-moz-placeholder,
+  .e-input-group.e-filled.e-disabled input.e-input::-moz-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-moz-placeholder,
+  textarea.e-filled.e-disabled.e-input#{$css}::-moz-placeholder,
+  .e-input-group.e-filled.e-disabled textarea.e-input::-moz-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-moz-placeholder,
+  input.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder,
+  .e-input-group.e-filled.e-disabled input.e-input:-ms-input-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-ms-input-placeholder,
+  textarea.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-ms-input-placeholder,
+  .e-input-group.e-filled.e-disabled textarea.e-input:-ms-input-placeholder,
+  input.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-webkit-input-placeholder,
+  .e-input-group.e-filled.e-disabled input.e-input::-webkit-input-placeholder,
+  textarea.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder,
+  .e-input-group.e-filled.e-disabled textarea.e-input::-webkit-input-placeholder,
+  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-webkit-input-placeholder,
+  .e-filled.e-float-input.e-disabled .e-clear-icon,
+  .e-filled.e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
+  .e-input-group.e-filled.e-disabled .e-clear-icon,
+  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-clear-icon,
+  .e-input-group.e-filled.e-disabled .e-input-group-icon,
+  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-input-group-icon,
+  .e-filled.e-float-input:not(.e-disabled) input[disabled],
+  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) input[disabled],
+  .e-filled.e-float-input:not(.e-disabled) textarea[disabled],
+  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) textarea[disabled] {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      color: $filled-input-disabled-font-color;
     }
   }
 
@@ -3813,12 +3076,7 @@
   .e-filled.e-float-input.e-small.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
@@ -3834,12 +3092,7 @@
   .e-bigger .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
@@ -3855,12 +3108,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-small.e-success textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-small.e-success textarea ~ label.e-label-top.e-float-text,
@@ -3880,12 +3128,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-success textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small.e-success textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea ~ label.e-label-top.e-float-text,
@@ -3905,12 +3148,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
@@ -3952,12 +3190,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
@@ -3973,12 +3206,7 @@
   .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-success-color;
-    }
-  }
-
+  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
@@ -3995,64 +3223,11 @@
   .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $input-success-color;
     }
   }
 
-  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input .e-control-wrapper.e-warning input label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
-  .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
-  .e-small .e-filled.e-float-input.e-warning input[readonly] ~ label.e-float-text.e-label-top,
-  .e-small .e-filled.e-float-input.e-warning input[disabled] ~ label.e-float-text.e-label-top,
-  .e-filled.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-warning input:valid ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-label-top.e-float-text,
-  .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-small .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-filled.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input ~ label.e-label-top.e-float-text,
@@ -4076,12 +3251,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -4095,12 +3265,7 @@
   .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
@@ -4116,12 +3281,7 @@
   .e-bigger .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
@@ -4137,12 +3297,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-small.e-warning textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
@@ -4162,12 +3317,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:valid ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
@@ -4187,12 +3337,7 @@
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:valid ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
   .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
   .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
@@ -4234,12 +3379,7 @@
   .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
-  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
   .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
@@ -4255,12 +3395,7 @@
   .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
-  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      color: $input-warning-color;
-    }
-  }
-
+  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
@@ -4277,7 +3412,7 @@
   .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
   .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       color: $input-warning-color;
     }
   }