@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/styles/input/_layout.scss

@@ -1,10 +1,12 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('input-layout') {
 
   /*! input layout */
   .e-input-group,
   .e-input-group.e-control-wrapper {
     display: table;
-    line-height: 1.4;
+    line-height: $input-group-line-height;
     margin-bottom: $input-margin-bottom;
   }
 
@@ -16,14 +18,15 @@
   .e-input-group.e-control-wrapper textarea.e-input {
     border: $input-border;
     border-width: $input-box-border-width;
-    height: auto;
-    line-height: inherit;
-    margin: $zero-value;
+    height: $float-auto-height;
+    line-height: $float-inherit-line-height;
+    margin: $input-zero-padding-margin;
     margin-bottom: $input-margin-bottom;
     outline: none;
     padding: $input-padding;
     text-indent: $input-text-indent;
-    width: 100%;
+    width: $input-full-position-width;
+    letter-spacing: $input-letter-spacing;
   }
 
   input.e-input#{$css},
@@ -34,7 +37,7 @@
   .e-input-group.e-control-wrapper.e-disabled {
     font-family: $input-font-family;
     font-size: $input-font-size;
-    font-weight: normal;
+    font-weight: $input-grp-font-weight;
     @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       font-feature-settings: 'calt' 0;
     }
@@ -109,12 +112,7 @@
   .e-float-input.e-input-group textarea,
   .e-float-input.e-control-wrapper textarea,
   .e-float-input.e-control-wrapper.e-input-group textarea {
-    @if $skin-name == 'fluent2' {
-      border-radius: 4px;
-    }
-    @else {
-      border-radius: $input-box-border-radius;
-    }
+    border-radius: $input-group-control-border-radius;
   }
 
   .e-input.e-small,
@@ -193,7 +191,7 @@
     flex-direction: column;
     font-size: $input-icon-font-size;
     justify-content: center;
-    line-height: 1;
+    line-height: $input-grup-icon-line-height;
     min-height: $input-child-min-height;
     min-width: $input-child-min-width;
     padding: $input-child-padding;
@@ -291,7 +289,7 @@
   .e-rtl .e-input-group .e-input-group-icon + .e-input-group-icon,
   .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
     @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
-      border-left-width: 1px;
+      border-left-width: $rtl-input-border-left-width;
       border-right-width: $zero-value;
     }
   }
@@ -302,7 +300,7 @@
   .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
     @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       border-left-width: $zero-value;
-      border-right: 1px solid $input-box-border-color;
+      border-right: $input-border-width solid $input-box-border-color;
     }
   }
 
@@ -312,7 +310,7 @@
   .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon + .e-input-group-icon {
     @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       border-left-width: $zero-value;
-      border-right-width: 1px;
+      border-right-width: $input-border-width;
     }
   }
 
@@ -345,9 +343,9 @@
   .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
     @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       border-bottom-left-radius: $input-group-icon-border-radius;
-      border-bottom-right-radius: $zero-value;
+      border-bottom-right-radius: $input-group-border-radius;
       border-top-left-radius: $input-group-icon-border-radius;
-      border-top-right-radius: $zero-value;
+      border-top-right-radius: $input-group-border-radius;
     }
   }
 
@@ -356,9 +354,9 @@
   .e-rtl .e-input-group .e-input-group-icon:first-child,
   .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
     @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
-      border-bottom-left-radius: $zero-value;
+      border-bottom-left-radius: $input-group-border-radius;
       border-bottom-right-radius: $input-group-icon-border-radius;
-      border-top-left-radius: $zero-value;
+      border-top-left-radius: $input-group-border-radius;
       border-top-right-radius: $input-group-icon-border-radius;
     }
   }
@@ -369,10 +367,10 @@
   .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       font-size: $input-left-icon-font-size;
-      margin: $zero-value;
+      margin: $input-zero-padding-margin;
       min-height: $input-left-child-min-height;
       min-width: $input-left-child-min-width;
-      padding: $zero-value;
+      padding: $input-zero-padding-margin;
     }
   }
 
@@ -663,20 +661,21 @@
   .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-font-size;
     font-style: $input-font-style;
-    font-weight: normal;
-    left: 0;
+    font-weight: $input-grp-font-weight;
+    left: $input-zero-padding-margin;
     overflow: hidden;
     padding-left: $float-label-padding;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    top: -11px;
+    top: $input-float-label-top;
     transform: translate3d(0, 16px, 0) scale(1);
     transform-origin: left top;
     transition: .25s cubic-bezier(.25, .8, .25, 1);
     user-select: none;
     white-space: nowrap;
-    width: 100%;
+    width: $input-full-position-width;
+    letter-spacing: $input-letter-spacing;
   }
 
   label.e-float-text,
@@ -684,7 +683,7 @@
   .e-float-input.e-control-wrapper label.e-float-text,
   .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 {
-    top: -11px;
+    top: $input-float-label-top;
   }
 
   label.e-float-text,
@@ -708,7 +707,7 @@
   .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-small-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -11px;
+      top: $input-float-label-top;
     }
   }
 
@@ -717,7 +716,7 @@
   .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
   .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -11px;
+      top: $input-float-label-top;
     }
   }
 
@@ -737,40 +736,41 @@
   .e-float-input.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      top: -9px;
+      top: $float-label-text-top;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fluent2' {
-      padding: 0;
-      top: -15px;
+      padding: $input-zero-padding-margin;
+      top: $float-label-text-top;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
     @else if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
     @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       font-weight: 500;
-      padding-right: 0;
-      transform: translate3d(-10px, -35px, 0) scale(1);
+      padding-right: $input-zero-padding-margin;
+      transform: $input-float-top-label-transform;
       @if $input-skin-name == 'tailwind3' {
-        padding-left: 0;
-        left: 12px;
+        padding-left: $input-zero-padding-margin;
+        left: $input-float-focus-label-left;
+        top: $input-float-top-label-top;
       }
     }
     @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -36px, 0) scale(1);
     }
     @else if ($input-skin-name == 'FluentUI') {
       font-weight: 600;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -41px, 0) scale(1);
     }
   }
@@ -801,32 +801,32 @@
   .e-small .e-float-input.e-control-wrapper input label.e-float-text.e-label-top {
     font-size: $float-label-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -9px;
+      top: $small-float-input-text-top;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
     @else if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
     @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -34px, 0) scale(1);
     }
     @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -35px, 0) scale(1);
     }
     @else if ($input-skin-name == 'FluentUI') {
       font-style: $input-font-normal;
       font-weight: 600;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -38px, 0) scale(1);
     }
   }
@@ -844,7 +844,7 @@
   .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper .e-input-in-wrap input label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -9px;
+      top: $small-float-input-text-top;
     }
   }
 
@@ -864,15 +864,15 @@
   .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
     font-size: $float-label-small-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -8px;
+      top: $float-input-small-label-top;
     }
     @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
-      padding-right: 0;
-      top: 17px;
+      padding-right: $input-zero-padding-margin;
+      top: $float-input-focus-text-top;
     }
     @if $input-skin-name == 'tailwind3' {
-      padding-left: 0;
-      left: 12px;
+      padding-left: $input-zero-padding-margin;
+      left: $input-float-focus-label-left;
     }
   }
 
@@ -889,24 +889,24 @@
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
   .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      top: -7px;
+      top: $float-input-small-text-top;
     }
   }
 
   .e-float-input,
   .e-float-input.e-control-wrapper {
-    line-height: 1.4;
+    line-height: $input-group-line-height;
     margin-bottom: $input-margin-bottom;
     margin-top: $input-margin-top;
     padding-top: $float-input-wrap-padding-top;
     position: relative;
-    width: 100%;
+    width: $input-full-position-width;
   }
 
   .e-float-input.e-small,
   .e-float-input.e-control-wrapper.e-small,
   .e-small .e-float-input.e-control-wrapper {
-    line-height: 1.35;
+    line-height: $input-group-float-small-line-height;
     margin-bottom: $input-small-margin-bottom;
     margin-top: $input-small-margin-top;
     padding-top: $float-input-small-wrap-padding-top;
@@ -925,7 +925,7 @@
   .e-float-input.e-control-wrapper.e-no-float-label,
   .e-float-input.e-control-wrapper.e-small.e-no-float-label,
   .e-small .e-float-input.e-control-wrapper.e-no-float-label {
-    margin-top: $zero-value;
+    margin-top: $input-zero-padding-margin;
   }
 
   .e-float-input,
@@ -936,7 +936,7 @@
   .e-float-input.e-input-group.e-control-wrapper.e-disabled {
     font-family: $input-font-family;
     font-size: $input-font-size;
-    font-weight: normal;
+    font-weight: $input-grp-font-weight;
   }
 
   .e-float-input input,
@@ -947,7 +947,8 @@
     border-width: $float-input-border-width;
     display: block;
     font: inherit;
-    width: 100%;
+    width: $input-full-position-width;
+    letter-spacing: $input-letter-spacing;
   }
 
   .e-float-input input,
@@ -985,7 +986,7 @@
   .e-float-input.e-small input,
   .e-float-input.e-control-wrapper.e-small input {
     font: inherit;
-    line-height: inherit;
+    line-height: $float-inherit-line-height;
     padding: $float-input-small-padding;
   }
 
@@ -1040,15 +1041,15 @@
 
   .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      left: -34px;
-      width: auto;
+      left: $float-outline-icon-mat-left;
+      width: $input-auto-width;
     }
   }
 
   .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      right: -34px;
-      width: auto;
+      right: $float-outline-icon-mat-left;
+      width: $input-auto-width;
     }
   }
   
@@ -1069,29 +1070,29 @@
   .e-float-input.e-control-wrapper: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.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    font-weight: normal;
+    font-weight: $input-grp-font-weight;
   }
 
   .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 {
-    bottom: 0;
+    bottom: $input-zero-padding-margin;
     content: '';
-    height: 2px;
+    height: $float-input-before-height;
     position: absolute;
     transition: .2s ease;
-    width: 0;
+    width: $input-zero-width;
   }
 
   .e-float-input:not(.e-input-group) .e-float-line::before,
   .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before {
-    left: 50%;
+    left: $input-half-position;
   }
 
   .e-float-input:not(.e-input-group) .e-float-line::after,
   .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
-    right: 50%;
+    right: $input-half-position;
   }
 
   .e-float-input:not(.e-input-group) input:focus ~ .e-float-line::before,
@@ -1106,14 +1107,14 @@
   .e-float-input:not(.e-input-group).e-input-focus input ~ .e-float-line::after,
   .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::before,
   .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::after {
-    width: 50%;
+    width: $input-half-position;
   }
 
   .e-float-input .e-float-line,
   .e-float-input.e-control-wrapper .e-float-line {
     display: block;
     position: relative;
-    width: 100%;
+    width: $input-full-position-width;
   }
 
   .e-float-input.e-rtl label.e-float-text,
@@ -1130,10 +1131,10 @@
   .e-rtl.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    right: 0;
+    right: $input-zero-padding-margin;
     transform-origin: right top;
     @if $input-skin-name == 'fluent2' {
-      padding-right: 8px;
+      padding-right: $rtl-float-input-flu2-padding-right;
     }
   }
 
@@ -1180,9 +1181,9 @@
   .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child,
   .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child,
   .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child {
-    border-bottom-left-radius: $zero-value;
+    border-bottom-left-radius: $input-group-border-radius;
     border-bottom-right-radius: $input-box-border-radius;
-    border-top-left-radius: $zero-value;
+    border-top-left-radius: $input-group-border-radius;
     border-top-right-radius: $input-box-border-radius;
   }
 
@@ -1191,9 +1192,9 @@
   .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child,
   .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child  {
     border-bottom-left-radius: $input-box-border-radius;
-    border-bottom-right-radius: $zero-value;
+    border-bottom-right-radius: $input-group-border-radius;
     border-top-left-radius: $input-box-border-radius;
-    border-top-right-radius: $zero-value;
+    border-top-right-radius: $input-group-border-radius;
   }
 
   .e-input-group.e-warning::before,
@@ -1221,7 +1222,7 @@
   .e-input-group input.e-input,
   .e-input-group.e-control-wrapper input.e-input {
     min-width: 0;
-    width: 100%;
+    width: $input-full-position-width;
   }
 
   .e-input-group input.e-input,
@@ -1242,7 +1243,7 @@
   .e-input-group.e-control-wrapper textarea.e-input,
   .e-float-input input.e-input,
   .e-float-input.e-control-wrapper input.e-input {
-    margin-bottom: $zero-value;
+    margin-bottom: $input-zero-padding-margin;
   }
 
   .e-input-group.e-input-focus::before,
@@ -1256,7 +1257,7 @@
   .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.e-float-icon-left .e-input-in-wrap .e-float-line::before {
     @if $input-skin-name == 'fluent2' {
-      border-bottom-right-radius: 10px;
+      border-bottom-right-radius: $input-group-focus-border-radius;
     }
   }
 
@@ -1271,7 +1272,7 @@
   .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::after {
     @if $input-skin-name == 'fluent2' {
-      border-bottom-left-radius: 10px;
+      border-bottom-left-radius: $input-group-focus-border-radius;
     }
   }
 
@@ -1394,7 +1395,7 @@
   .e-input-group,
   .e-input-group.e-control-wrapper {
     position: relative;
-    width: 100%;
+    width: $input-full-position-width;
   }
 
   .e-input-group .e-input-group-icon:hover,
@@ -1452,7 +1453,7 @@
   .e-input-group .e-input-group-icon:last-child,
   .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
     @if $skin-name == 'fluent2' {
-      margin-right: 4px;
+      margin-right: $input-grp-icon-margin-right;
     }
   }
 
@@ -1461,7 +1462,7 @@
   .e-input-group.e-small .e-input-group-icon:last-child,
   .e-input-group.e-control-wrapper.e-small .e-input-group-icon:last-child {
     @if $input-skin-name != 'fluent' {
-      margin-right: $zero-value;
+      margin-right: $input-zero-padding-margin;
     }
     @if $input-skin-name == 'fluent2' {
       margin: $zero-value;
@@ -1537,23 +1538,7 @@
       border-width: $input-group-full-border-width;
     }
     @if $input-skin-name == 'Material3' {
-      padding-top: 1px;
-    }
-  }
-
-  .e-underline.e-input-group:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-success:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-warning:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-error:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      border: $input-group-full-border;
-      border-width: $input-group-full-border-width;
-      padding-top: 1px;
-      border-radius: 0;
+      padding-top: $input-grp-msg-padding-top;
     }
   }
 
@@ -1669,14 +1654,8 @@
   .e-float-input.e-input-group.e-control-wrapper .e-float-line,
   .e-float-input.e-control-wrapper.e-input-group .e-float-line,
   .e-float-input.e-control-wrapper.e-input-group.e-control-wrapper .e-float-line {
-    @if $input-skin-name == 'fluent2' {
-      bottom: -.1px;
-      position: absolute;
-    }
-    @else {
-      bottom: -1px;
-      position: absolute;
-    }
+    bottom: $float-input-group-line-bottom;
+    position: absolute;
   }
 
   .e-float-input.e-input-group input,
@@ -1700,7 +1679,7 @@
   .e-float-input.e-input-group .e-float-text,
   .e-float-input.e-input-group.e-control-wrapper .e-float-line,
   .e-float-input.e-input-group.e-control-wrapper .e-float-text  {
-    right: $zero-value;
+    right: $input-zero-padding-margin;
   }
 
   
@@ -1911,7 +1890,7 @@
   .e-float-input.e-control-wrapper.e-input-focus input,
   .e-float-input.e-input-focus input {
     padding-left: $input-text-indent;
-    text-indent: 0;
+    text-indent: $input-zero-padding-margin;
   }
 
   textarea.e-input#{$css},
@@ -1928,12 +1907,12 @@
   .e-float-input.e-control-wrapper textarea:focus,
   .e-float-input textarea:focus {
     @if $input-skin-name == 'fluent2' {
-      padding-left: 12px;
+      padding-left: $textarea-input-padding-left;
     }
     @else {
       padding-left: $input-text-indent;
     }
-    text-indent: 0;
+    text-indent: $input-zero-padding-margin;
   }
 
   input.e-input.e-rtl#{$css},
@@ -1970,9 +1949,9 @@
   .e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
   .e-rtl .e-float-input.e-input-focus input,
   .e-rtl .e-float-input.e-control-wrapper.e-input-focus input {
-    padding-left: 0;
+    padding-left: $input-zero-padding-margin;
     padding-right: $input-text-indent;
-    text-indent: 0;
+    text-indent: $input-zero-padding-margin;
   }
 
   textarea.e-input.e-rtl#{$css},
@@ -2001,7 +1980,7 @@
   .e-rtl .e-float-input:not(.e-outline) textarea:focus,
   .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea:focus {
     padding-right: $input-text-indent;
-    text-indent: 0;
+    text-indent: $input-zero-padding-margin;
   }
 
   input.e-input.e-small#{$css},
@@ -2057,7 +2036,7 @@
   .e-small .e-float-input.e-control-wrapper textarea:focus,
   .e-small .e-float-input textarea:focus {
     padding-left: $input-small-text-indent;
-    text-indent: 0;
+    text-indent: $input-zero-padding-margin;
   }
 
   .e-rtl input.e-input.e-small#{$css},
@@ -2104,9 +2083,9 @@
   .e-small.e-rtl .e-float-input.e-input-focus input,
   .e-small .e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
   .e-small .e-float-input.e-rtl.e-input-focus input {
-    padding-left: 0;
+    padding-left: $input-zero-padding-margin;
     padding-right: $input-small-text-indent;
-    text-indent: 0;
+    text-indent: $input-zero-padding-margin;
   }
 
   .e-rtl textarea.e-input.e-small#{$css},
@@ -2146,7 +2125,7 @@
   .e-small .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea:focus,
   .e-small .e-float-input:not(.e-outline).e-rtl textarea:focus {
     padding-right: $input-small-text-indent;
-    text-indent: 0;
+    text-indent: $input-zero-padding-margin;
   }
   // Clear-icon support
   .e-float-input .e-clear-icon,
@@ -2159,7 +2138,7 @@
     display: flex;
     flex-direction: column;
     justify-content: $input-clear-icon-position;
-    line-height: 1;
+    line-height: $input-grup-icon-line-height;
     min-width: 24px;
     outline: none;
     padding: $input-clear-icon-padding;
@@ -2171,7 +2150,7 @@
   .e-input-group .e-clear-icon::before,
   .e-input-group.e-control-wrapper .e-clear-icon::before {
     font-size: $input-clear-icon;
-    padding: $zero-value;
+    padding: $input-zero-padding-margin;
     text-align: center;
     vertical-align: middle;
   }
@@ -2326,8 +2305,8 @@
       border-top-color: $border;
       border-left-color: $border;
       border-right-color: $border;
-      border-radius: 4px;
-      height: 30px;
+      border-radius: $input-float-border-radius;
+      height: $input-float-height;
     }
   }
 
@@ -2335,7 +2314,7 @@
   .e-input-group.e-control-wrapper .e-input-in-wrap,
   .e-float-input .e-input-in-wrap,
   .e-float-input.e-control-wrapper .e-input-in-wrap {
-    width: 100%;
+    width: $input-full-position-width;
     @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
       display: flex;
       position: relative;
@@ -2344,7 +2323,7 @@
 
   .e-float-input .e-input-in-wrap label.e-float-text,
   .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text {
-    right: 0;
+    right: $input-zero-padding-margin;
     @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2360,7 +2339,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       display: flex;
       position: relative;
-      width: 100%;
+      width: $input-full-position-width;
     }
   }
 
@@ -2387,7 +2366,7 @@
   .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      margin-left: $zero-value;
+      margin-left: $input-zero-padding-margin;
       margin-right: $input-inner-wrap-margin-left;
     }
   }
@@ -2401,7 +2380,7 @@
     }
     @if $input-skin-name == 'fluent2' {
       transform: translate3d(0, 16px, 0) scale(1);
-      padding-left: 7px;
+      padding-left: $float-input-label-padding-left;
     }
   }
 
@@ -2431,23 +2410,23 @@
       transform: translate3d(-10px, -40px, 0) scale(1);
     }
     @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -37px, 0) scale(1);
     }
     @else if $input-skin-name == 'tailwind' {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -33px, 0) scale(1);
     }
     @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -36px, 0) scale(1);
     }
     @else if ($input-skin-name == 'FluentUI') {
       font-style: $input-font-normal;
       font-weight: 600;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -41px, 0) scale(1);
     }
   }
@@ -2462,27 +2441,27 @@
   .e-small .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
     font-size: $float-label-small-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -21px;
+      top: $float-textarea-small-text-top;
     }
     @if $input-skin-name == 'tailwind3' {
       top: -21px;
       left: 2px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
-      top: 16px;
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
+      top: $float-textarea-small-text-top;
     }
   }
 
   .e-float-input textarea ~ .e-float-text,
   .e-float-input.e-control-wrapper textarea ~ .e-float-text {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -11px;
+      top: $float-input-wrapper-top;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' {
-      top: 15px;
+      top: $float-input-wrapper-top;
     }
     @else if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
-      top: 13px;
+      top: $float-input-wrapper-top;
     }
   }
 
@@ -2492,7 +2471,7 @@
   .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-small-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -11px;
+      top: $float-input-wrapper-top;
     }
   }
 
@@ -2506,10 +2485,10 @@
   .e-small .e-float-input.e-control-wrapper textarea ~ label.e-float-text {
     font-size: $float-placeholder-small-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -11px;
+      top: $float-input-wrapper-top;
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
-      top: 15px;
+      top: $float-placeholder-small-font-top;
     }
   }
 
@@ -2603,11 +2582,8 @@
   .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::before,
   .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      bottom: -2px;
-    }
-    @else if $input-skin-name == 'fluent2' {
-      bottom: -.3px;
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      bottom: $input-group-bottom;
     }
   }
 
@@ -2648,7 +2624,7 @@
   .e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-style: $input-group-border-type-focus;
-      border-width: $zero-value $zero-value 1px;
+      border-width: $zero-value $zero-value $input-border-width;
     }
   }
 
@@ -2657,23 +2633,23 @@
   .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3'  {
-      top: -9px;
+      top: $float-label-text-top;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
     @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
       font-weight: bold;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
     @else if ($input-skin-name == 'FluentUI') {
       font-style: $input-font-normal;
-      font-weight: 600;
-      padding-right: 0;
+      font-weight: $font-weight-medium;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -41px, 0) scale(1);
     }
     user-select: text;
@@ -2687,26 +2663,26 @@
   .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-small-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -8px;
+      top: $float-label-bgr-input-top;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
-      padding-right: 0;
-      top: 17px;
+      padding-right: $input-zero-padding-margin;
+      top: $small-float-input-label-top;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
     @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
       font-weight: bold;
-      padding-right: 0;
-      top: 17px;
+      padding-right: $input-zero-padding-margin;
+      top: $small-float-input-label-top;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
     @else if ($input-skin-name == 'FluentUI') {
       font-style: $input-font-normal;
-      font-weight: 600;
-      padding-right: 0;
-      top: 17px;
+      font-weight: $font-weight-medium;
+      padding-right: $input-zero-padding-margin;
+      top: $small-float-input-label-top;
       transform: translate3d(-10px, -38px, 0) scale(1);
     }
     user-select: text;
@@ -2743,20 +2719,21 @@
   .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     font-size: $float-placeholder-font-size;
     font-style: $input-font-style;
-    font-weight: normal;
-    left: 0;
+    font-weight: $input-grup-icon-line-height;
+    left: $input-zero-padding-margin;
     overflow: hidden;
     padding-left: $float-label-padding;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    top: -11px;
+    top: $input-float-label-top;
     transform: translate3d(0, 16px, 0) scale(1);
     transform-origin: left top;
     transition: .25s cubic-bezier(.25, .8, .25, 1);
     user-select: none;
     white-space: nowrap;
-    width: 100%;
+    width: $input-full-position-width;
+    letter-spacing: $input-letter-spacing;
   }
 
   .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
@@ -2764,7 +2741,7 @@
   .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -9px;
+      top: $float-bigger-label-font-top;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
@@ -2779,13 +2756,13 @@
     }
     @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3'  or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -40px, 0) scale(1);
     }
     @else if $input-skin-name == 'FluentUI' {
       font-style: $input-font-normal;
       font-weight: 600;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -41px, 0) scale(1);
     }
     user-select: text;
@@ -2799,26 +2776,26 @@
   .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
     font-size: $float-label-small-font-size;
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
-      top: -8px;
+      top: $float-label-bgr-input-top;
       transform: translate3d(0, -6px, 0) scale(.92);
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
-      padding-right: 0;
-      top: 17px;
+      padding-right: $input-zero-padding-margin;
+      top: $small-float-input-label-top;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
     @else if $input-skin-name == 'bootstrap' {
       font-weight: $input-float-font-weight;
-      padding-right: 0;
-      top: 17px;
+      padding-right: $input-zero-padding-margin;
+      top: $small-float-input-label-top;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
     @else if $input-skin-name == 'FluentUI' {
       font-style: $input-font-normal;
-      font-weight: 600;
-      padding-right: 0;
-      top: 17px;
+      font-weight: $font-weight-medium;
+      padding-right: $input-zero-padding-margin;
+      top: $small-float-input-label-top;
       transform: translate3d(-10px, -37px, 0) scale(1);
     }
     user-select: text;
@@ -2853,27 +2830,27 @@
     }
     @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
       font-style: $input-font-normal;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
     @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
     @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -31px, 0) scale(1);
     }
     @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
       font-weight: 500;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -35px, 0) scale(1);
     }
     @else if ($input-skin-name == 'FluentUI') {
       font-style: $input-font-normal;
       font-weight: 600;
-      padding-right: 0;
+      padding-right: $input-zero-padding-margin;
       transform: translate3d(-10px, -37px, 0) scale(1);
     }
   }
@@ -2911,7 +2888,7 @@
   .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
   .e-float-input textarea,
   .e-float-input.e-control-wrapper textarea {
-    line-height: 1.5;
+    line-height: $input-textarea-line-height;
     min-height: $textarea-min-height;
     min-width: 0;
     padding: $textarea-padding;
@@ -3014,7 +2991,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       overflow: hidden;
       text-overflow: ellipsis;
-      width: 100%;
+      width: $input-full-position-width;
     }
   }
 
@@ -3064,9 +3041,9 @@
   .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
   .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border: 1px solid $outline-border-color;
-      border-radius: 4px;
-      border-width: 1px;
+      border: $input-border-width solid $outline-border-color;
+      border-radius: $outline-input-border-radius;
+      border-width: $input-border-width;
       fill: transparent;
       transition: border .2s, box-shadow .2s;
     }
@@ -3086,39 +3063,18 @@
   .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
   .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
     @if $input-skin-name == 'fluent2' {
-      border: 1px solid $outline-border-color;
-      border-radius: 4px;
-      border-width: 1px;
+      border: $input-border-width solid $outline-border-color;
+      border-radius: $input-float-border-radius;
+      border-width: $input-border-width;
       fill: transparent;
       transition: border .2s, box-shadow .2s;
     }
   }
 
-  .e-underline.e-input-group.e-control-wrapper,
-  .e-underline.e-input-group,
-  .e-underline.e-input-group:not(.e-float-icon-left),
-  .e-underline.e-float-input,
-  .e-underline.e-float-input.e-control-wrapper,
-  .e-underline.e-input-group:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-success:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-warning:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-error:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
-  .e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      border: 1px solid $underline-border-color;
-      border-width: $input-group-full-border-width;
-      padding-top: 1px;
-      border-radius: 0;
-    }
-  }
-
   .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      margin-top: $zero-value;
+      margin-top: $input-zero-padding-margin;
     }
   }
 
@@ -3239,7 +3195,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
       box-sizing: border-box;
       margin: $outline-textarea-margin-top;
-      padding: $zero-value $outline-input-padding-left $outline-input-padding-left;
+      padding: $input-zero-padding-margin $outline-input-padding-left $outline-input-padding-left;
     }
   }
 
@@ -3295,7 +3251,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border: $input-group-border-width;
       border-width: $input-group-border-width;
-      margin-left: $zero-value;
+      margin-left: $input-zero-padding-margin;
     }
   }
 
@@ -3304,8 +3260,8 @@
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      margin-left: 4px;
-      margin-right: $zero-value;
+      margin-left: $input-mat-margin;
+      margin-right: $input-zero-padding-margin;
     }
   }
 
@@ -3314,8 +3270,8 @@
   .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      margin-right: 4px;
-      margin-left: $zero-value;
+      margin-right: $input-mat-margin;
+      margin-left: $input-zero-padding-margin;
     }
   }
 
@@ -3330,8 +3286,8 @@
     @if $input-skin-name == 'Material3' {
       font-size: $outline-input-clear-icon-font-size;
       padding: $zero-value;
-      height: 32px;
-      margin: 4px;
+      height: $float-input-normal-height;
+      margin: $input-mat-margin;
     }
   }
 
@@ -3348,7 +3304,7 @@
   .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-icon-font-size;
-      margin: 9px $outline-input-icon-margin-right 9px $zero-value;
+      margin: $outline-input-grp-icon-margin;
     }
   }
 
@@ -3356,7 +3312,7 @@
   .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $outline-input-icon-font-size;
-      margin: 9px $zero-value 9px $outline-input-icon-margin-right;
+      margin: $outline-input-grp-prepend-icon-margin;
     }
   }
 
@@ -3627,7 +3583,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       box-sizing: border-box;
       display: flex;
-      left: $zero-value;
+      left: $input-zero-padding-margin;
       line-height: $outline-label-default-line-height;
       position: absolute;
       top: $outline-float-label-top;
@@ -3762,7 +3718,7 @@
   .e-outline.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-top-color: $outline-border-color;
-      border-width: 1px;
+      border-width: $input-border-width;
     }
   }
 
@@ -3836,7 +3792,7 @@
   .e-outline.e-float-input label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      border-left: solid 1px transparent;
+      border-left: solid $input-border-width transparent;
       border-radius: $outline-label-margin $zero-value;
       left: $outline-label-before-left;
       margin-right: $outline-label-margin;
@@ -3868,7 +3824,7 @@
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       border-radius: $zero-value $outline-label-border-radius;
-      border-right: solid 1px transparent;
+      border-right: solid $input-border-width transparent;
       flex-grow: 1;
       left: $outline-label-after-left;
       margin-left: $outline-label-margin;
@@ -4167,7 +4123,7 @@
   .e-filled.e-input-group.e-control-wrapper,
   .e-filled.e-float-input,
   .e-filled.e-float-input.e-control-wrapper {
-    line-height: 1;
+    line-height: $input-grup-icon-line-height;
   }
 
   .e-filled input.e-input#{$css},
@@ -4299,8 +4255,8 @@
 
   .e-filled.e-input-group,
   .e-filled.e-input-group.e-control-wrapper {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      border-radius: 4px 4px $zero-value $zero-value;
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
+      border-radius: $filled-input-grp-border-radius;
       padding: $filled-wrapper-padding;
     }
   }
@@ -4316,9 +4272,9 @@
 
   .e-filled.e-float-input,
   .e-filled.e-float-input.e-control-wrapper {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
       border: $input-group-full-border;
-      border-radius: 4px 4px $zero-value $zero-value;
+      border-radius: $filled-input-grp-border-radius;
       border-width: $input-group-full-border-width;
       margin-top: $filled-wrapper-margin;
       padding: $filled-float-input-wrapper-padding;
@@ -4448,7 +4404,7 @@
   .e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-input-rtl-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -4470,7 +4426,7 @@
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-float-input-rtl-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -4500,7 +4456,7 @@
   .e-small .e-filled.e-input-group.e-rtl.e-input-focus input.e-input {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-small-input-rtl-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -4526,7 +4482,7 @@
   .e-small .e-filled.e-float-input.e-rtl.e-input-focus input {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-small-float-input-rtl-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -4609,15 +4565,15 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $filled-float-label-font-size;
       left: $filled-input-label-left;
-      letter-spacing: .009375em;
-      line-height: 1.15;
+      letter-spacing: $filled-float-letter-spacing;
+      line-height: $input-filled-float-text-line-height;
       padding-left: $float-label-padding;
       pointer-events: none;
-      right: auto;
+      right: $input-auto-width;
       top: $filled-input-label-top;
       transform: none;
       transition: transform 150ms cubic-bezier(.4, $zero-value, .2, 1), color 150ms cubic-bezier(.4, $zero-value, .2, 1);
-      width: 100%;
+      width: $input-full-position-width;
     }
   }
 
@@ -4628,7 +4584,7 @@
       padding-left: $float-label-padding;
       top: $filled-input-label-top;
       transform: none;
-      width: 100%;
+      width: $input-full-position-width;
     }
   }
 
@@ -4652,7 +4608,7 @@
       transform: translateY(-50%) scale(.75);
     }
     @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      left: 1px;
+      left: $filled-float-input-text-left;
     }
   }
 
@@ -4846,7 +4802,7 @@
   .e-filled.e-float-input .e-float-line,
   .e-float-input.e-filled.e-control-wrapper .e-float-line {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      bottom: -1px;
+      bottom: $float-input-group-line-bottom;
       position: absolute;
     }
   }
@@ -4883,7 +4839,7 @@
   .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      right: $zero-value;
+      right: $input-zero-padding-margin;
     }
   }
 
@@ -4891,11 +4847,8 @@
   .e-filled.e-filled.e-input-group:not(.e-disabled):not(.e-float-icon-left)::after,
   .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::before,
   .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after {
-    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      bottom: -1px;
-    }
-    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      bottom: -.1px;
+    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
+      bottom: $filled-input-icon-before-bottom;
     }
   }
 
@@ -4907,11 +4860,11 @@
   .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $filled-input-icon-size;
-      margin-bottom: $zero-value;
-      margin-top: $zero-value;
+      margin-bottom: $input-zero-padding-margin;
+      margin-top: $input-zero-padding-margin;
       min-height: $filled-input-icon-min-height;
       min-width: $filled-input-icon-min-height;
-      padding: $zero-value $zero-value $zero-value 8px;
+      padding: $input-filled-icon-padding;
     }
   }
 
@@ -4940,7 +4893,7 @@
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      padding: $zero-value 8px $zero-value $zero-value;
+      padding: $input-bgr-filled-control-icon-padding;
     }
   }
 
@@ -4952,7 +4905,7 @@
       font-size: $small-filled-input-icon-size;
       min-height: $small-filled-input-icon-min-height;
       min-width: $small-filled-input-icon-min-height;
-      padding: $zero-value $zero-value $zero-value 4px;
+      padding: $input-small-filled-group-icon-padding;
     }
   }
 
@@ -4973,7 +4926,7 @@
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      padding: $zero-value 4px $zero-value $zero-value;
+      padding: $input-rtl-small-filled-group-icon-padding;
     }
   }
 
@@ -4985,12 +4938,14 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $filled-input-icon-size;
-      margin-bottom: $zero-value;
-      margin-top: $zero-value;
-      padding: 8px;
       @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-        padding: 0;
-        margin: 9px 12px 9px 0;
+        padding: $input-filled-small-float-group-icon-padding;
+        margin: $input-filled-small-float-group-icon-margin;
+      }
+      @else {
+        margin-bottom: $zero-value;
+        margin-top: $zero-value;
+        padding: 8px;
       }
     }
   }
@@ -5001,7 +4956,7 @@
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $small-filled-input-icon-size;
-      padding: $zero-value $zero-value $zero-value 4px;
+      padding: $small-filled-input-padding;
     }
   }
 
@@ -5011,7 +4966,7 @@
   .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       font-size: $filled-input-clear-icon-size;
-      padding: $zero-value $zero-value $zero-value 8px;
+      padding: $input-bgr-filled-grp-icon-padding;
     }
     @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $filled-input-clear-icon-size;
@@ -5024,7 +4979,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
       min-height: $filled-input-icon-min-height;
       min-width: $filled-input-icon-min-height;
-      padding: $zero-value $zero-value $zero-value 8px;
+      padding: $input-bgr-filled-grp-icon-padding;
     }
     @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       min-height: $filled-input-icon-min-height;
@@ -5039,9 +4994,9 @@
       padding: $zero-value $zero-value $zero-value 8px;
     }
     @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      padding: $zero-value;
-      margin: 2px;
-      height: 32px;
+      padding: $input-zero-padding-margin;
+      margin: $filled-float-input-clear-icon-margin;
+      height: $filled-input-clear-icon-height;
     }
   }
 
@@ -5055,13 +5010,13 @@
       font-size: $small-filled-input-clear-icon-size;
       min-height: $small-filled-input-icon-min-height;
       min-width: $small-filled-input-icon-min-height;
-      padding: $zero-value $zero-value $zero-value 4px;
+      padding: $small-filled-input-padding;
     }
     @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $small-filled-input-clear-icon-size;
       min-height: $small-filled-input-icon-min-height;
       min-width: $small-filled-input-icon-min-height;
-      padding: $zero-value;
+      padding: $input-zero-padding-margin;
     }
   }
 
@@ -5078,7 +5033,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      padding: $zero-value $zero-value $zero-value 4px;
+      padding: $small-filled-input-padding;
     }
   }
 
@@ -5106,7 +5061,7 @@
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      padding: $zero-value 8px $zero-value $zero-value;
+      padding: $filled-rtl-input-small-bgr-clear-padding;
     }
   }
 
@@ -5119,7 +5074,7 @@
   .e-small.e-rtl .e-filled.e-input-group .e-clear-icon,
   .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      padding: $zero-value 4px $zero-value $zero-value;
+      padding: $input-rtl-small-filled-group-icon-padding;
     }
   }
 
@@ -5132,10 +5087,10 @@
   .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
   .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
-      padding: $zero-value 4px $zero-value $zero-value;
+      padding: $input-rtl-small-filled-group-icon-padding;
     }
     @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      padding: $zero-value;
+      padding: $input-zero-padding-margin;
     }
   }
 
@@ -5237,10 +5192,10 @@
   .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $filled-input-icon-size;
-      margin: $zero-value;
+      margin: $input-zero-padding-margin;
       min-height: $filled-input-left-icon-min-height;
       min-width: $filled-input-left-icon-min-width;
-      padding: $zero-value;
+      padding: $input-zero-padding-margin;
     }
   }
 
@@ -5252,10 +5207,10 @@
   .e-small .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       font-size: $small-filled-input-icon-size;
-      margin: $zero-value;
+      margin: $input-zero-padding-margin;
       min-height: $small-filled-input-left-icon-min-height;
       min-width: $small-filled-input-left-icon-min-width;
-      padding: $zero-value;
+      padding: $input-zero-padding-margin;
     }
   }
 
@@ -5264,10 +5219,10 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
   .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin: $zero-value;
+      margin: $input-zero-padding-margin;
       min-height: $filled-input-left-icon-min-height;
       min-width: $filled-input-left-icon-min-width;
-      padding: $zero-value;
+      padding: $input-zero-padding-margin;
     }
   }
 
@@ -5284,10 +5239,10 @@
   .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin: $zero-value;
+      margin: $input-zero-padding-margin;
       min-height: $small-filled-input-left-icon-min-height;
       min-width: $small-filled-input-left-icon-min-width;
-      padding: $zero-value;
+      padding: $input-zero-padding-margin;
     }
   }
 
@@ -5308,7 +5263,7 @@
   .e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      left: $zero-value;
+      left: $input-zero-padding-margin;
     }
   }
 
@@ -5325,7 +5280,7 @@
   .e-small .e-filled.e-input-group .e-input-group-icon,
   .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin-right: $zero-value;
+      margin-right: $input-zero-padding-margin;
     }
   }
 
@@ -5342,7 +5297,7 @@
   .e-rtl .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
   .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin-left: $zero-value;
+      margin-left: $input-zero-padding-margin;
     }
   }
 
@@ -5359,8 +5314,8 @@
   .e-rtl.e-small .e-filled.e-input-group .e-input-group-icon,
   .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin-left: $zero-value;
-      margin-right: $zero-value;
+      margin-left: $input-zero-padding-margin;
+      margin-right: $input-zero-padding-margin;
     }
   }
 
@@ -5471,7 +5426,7 @@
   .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-textarea-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -5489,7 +5444,7 @@
   .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-float-textarea-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -5515,7 +5470,7 @@
   .e-small .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-small-textarea-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -5537,7 +5492,7 @@
   .e-small .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       padding: $filled-small-float-textarea-padding;
-      text-indent: 0;
+      text-indent: $input-zero-padding-margin;
     }
   }
 
@@ -5548,7 +5503,7 @@
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       border: $input-group-full-border;
       border-width: $zero-value;
-      margin-left: 8px;
+      margin-left: $filled-float-input-wrap-margin-left;
     }
   }
 
@@ -5560,8 +5515,8 @@
   .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin-left: $zero-value;
-      margin-right: 8px;
+      margin-left: $input-zero-padding-margin;
+      margin-right: $filled-float-input-wrap-margin-right;
     }
   }
 
@@ -5574,7 +5529,7 @@
   .e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin-left: 4px;
+      margin-left: $small-filled-float-input-wrap-margin-left;
     }
   }
 
@@ -5595,8 +5550,8 @@
   .e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
   .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      margin-left: $zero-value;
-      margin-right: 4px;
+      margin-left: $input-zero-padding-margin;
+      margin-right: $small-filled-float-input-wrap-margin-right;
     }
   }
 
@@ -5606,7 +5561,7 @@
   .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' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       @include input-group-animation;
-      bottom: -1px;
+      bottom: $float-input-group-line-bottom;
     }
   }
 
@@ -5616,7 +5571,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::after {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
       @include input-group-animation-width;
-      bottom: -1px;
+      bottom: $float-input-group-line-bottom;
     }
   }
 
@@ -5625,7 +5580,7 @@
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
   .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after {
     @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
-      width: $zero-value;
+      width: $input-zero-width;
     }
   }
 
@@ -5729,14 +5684,14 @@
 
   @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
     .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
-      padding: 0;
+      padding: $input-zero-padding-margin;
   
       input {
-        padding: 14px 2px 5px 12px;
+        padding: $filled-float-append-padding;
       }
   
       label.e-float-text {
-        padding-left: 12px;
+        padding-left: $filled-float-append-padding-left;
       }
   
       .e-input-in-wrap .e-input-group-icon {