@syncfusion/ej2-inputs 19.2.59 → 19.3.47

package/styles/input/_layout.scss

@@ -103,7 +103,7 @@
   .e-input.e-small,
   .e-input-group.e-small,
   .e-input-group.e-control-wrapper.e-small {
-    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
       border-radius: $input-small-border-radius;
     }
   }
@@ -180,7 +180,7 @@
   .e-bigger .e-input-group.e-disabled,
   .e-input-group.e-control-wrapper.e-bigger.e-disabled,
   .e-bigger .e-input-group.e-control-wrapper.e-disabled {
-    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
       border-radius: $input-bigger-border-radius;
     }
     font-size: $input-bigger-font-size;
@@ -198,7 +198,7 @@
   .e-bigger.e-small .e-input-group.e-disabled,
   .e-input-group.e-control-wrapper.e-bigger.e-small.e-disabled,
   .e-bigger.e-small .e-input-group.e-control-wrapper.e-disabled {
-    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
       border-radius: $input-bigger-small-border-radius;
     }
   }
@@ -249,7 +249,7 @@
     min-width: $input-child-min-width;
     padding: $input-child-padding;
     text-align: center;
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border: 1px solid;
       border-bottom: $zero-value;
       border-collapse: collapse;
@@ -271,7 +271,7 @@
 
   .e-input-group .e-input-group-icon:last-child,
   .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-right-width: $zero-value;
     }
   }
@@ -289,7 +289,7 @@
 
   .e-input-group .e-input-group-icon + .e-input-group-icon
   .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-left-width: $zero-value;
     }
   }
@@ -307,7 +307,7 @@
 
   .e-input-group .e-input-group-icon:first-child,
   .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 == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
       border-left-width: $zero-value;
     }
   }
@@ -316,7 +316,7 @@
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon,
   .e-rtl .e-input-group .e-input-group-icon,
   .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-left-width: 1px;
       border-right-width: $zero-value;
     }
@@ -326,7 +326,7 @@
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon + .e-input-group-icon,
   .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') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-left-width: 1px;
       border-right-width: $zero-value;
     }
@@ -336,7 +336,7 @@
   .e-input-group.e-control-wrapper.e-rtl input ~ .e-input-group-icon,
   .e-rtl .e-input-group input ~ .e-input-group-icon,
   .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-left-width: $zero-value;
       border-right-width: 1px;
     }
@@ -346,7 +346,7 @@
   .e-input-group.e-control-wrapper.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
   .e-rtl .e-input-group input ~ .e-input-group-icon + .e-input-group-icon,
   .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') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-left-width: $zero-value;
       border-right-width: 1px;
     }
@@ -354,7 +354,7 @@
 
   .e-input-group .e-input-group-icon + .e-input-group-icon,
   .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-left-width: $zero-value;
     }
   }
@@ -372,7 +372,7 @@
 
   .e-input-group .e-input-group-icon:last-child,
   .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 == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
       border-bottom-right-radius: $input-group-icon-border-radius;
       border-top-right-radius: $input-group-icon-border-radius;
     }
@@ -380,7 +380,7 @@
 
   .e-input-group .e-input-group-icon:first-child,
   .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 == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
       border-bottom-left-radius: $input-group-icon-border-radius;
       border-top-left-radius: $input-group-icon-border-radius;
     }
@@ -390,7 +390,7 @@
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
   .e-rtl .e-input-group .e-input-group-icon:last-child,
   .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 == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
       border-bottom-left-radius: $input-group-icon-border-radius;
       border-bottom-right-radius: $zero-value;
       border-top-left-radius: $input-group-icon-border-radius;
@@ -402,7 +402,7 @@
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child,
   .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') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-bottom-left-radius: $zero-value;
       border-bottom-right-radius: $input-group-icon-border-radius;
       border-top-left-radius: $zero-value;
@@ -614,7 +614,7 @@
 
   .e-input-group .e-input-group-icon:first-child,
   .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'tailwind' and $input-skin-name != 'tailwind-dark') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') {
       border-left-width: $input-border-left-width;
     }
   }
@@ -626,7 +626,7 @@
 
   .e-input-group .e-input-group-icon:not(:last-child),
   .e-input-group.e-control-wrapper .e-input-group-icon:not(:last-child) {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
       border-right-width: $zero-value;
     }
   }
@@ -634,7 +634,7 @@
   .e-input + .e-input-group-icon,
   .e-input-group .e-input + .e-input-group-icon,
   .e-input-group.e-control-wrapper .e-input + .e-input-group-icon {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
       border-left-width: $zero-value;
     }
   }
@@ -690,7 +690,7 @@
 
   .e-input-group.e-rtl .e-input-group-icon:first-child,
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child  {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
       border-left-width: $zero-value;
       border-right-width: $input-border-left-width;
     }
@@ -698,7 +698,7 @@
 
   .e-input-group.e-rtl .e-input-group-icon:last-child,
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'tailwind' and $input-skin-name != 'tailwind-dark') or $input-skin-name == 'highcontrast' {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') or $input-skin-name == 'highcontrast' {
       border-left-width: $input-border-left-width;
       border-right-width: $zero-value;
     }
@@ -717,7 +717,7 @@
 
   .e-input-group.e-rtl .e-input-group-icon:not(:last-child),
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:not(:last-child) {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'tailwind' and $input-skin-name != 'tailwind-dark') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') {
       border-left-width: $input-border-left-width;
     }
   }
@@ -731,7 +731,7 @@
 
   .e-input-group.e-rtl .e-input-group-icon  + .e-input,
   .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon  + .e-input {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
       border-right-width: $zero-value;
     }
   }
@@ -1101,11 +1101,16 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -35px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -36px, 0) scale(1);
+    }
   }
 
   .e-float-input.e-small input:focus ~ label.e-float-text,
@@ -1150,11 +1155,16 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -34px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -35px, 0) scale(1);
+    }
   }
 
   .e-float-input.e-bigger input:focus ~ label.e-float-text,
@@ -1197,15 +1207,20 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if $input-skin-name == 'bootstrap4' {
+    @else if ($input-skin-name == 'bootstrap4') {
       padding-right: 0;
       transform: translate3d(-10px, -42px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -37px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -39px, 0) scale(1);
+    }
   }
 
   .e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
@@ -1258,16 +1273,20 @@
       padding-right: 0;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
-
     @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -34px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -36px, 0) scale(1);
+    }
   }
 
   .e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
@@ -1315,7 +1334,7 @@
     @if $input-skin-name == 'material' {
       top: -9px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       padding-right: 0;
       top: 14px;
     }
@@ -1364,7 +1383,7 @@
     @if $input-skin-name == 'material' {
       top: -8px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       padding-right: 0;
       top: 17px;
     }
@@ -1420,7 +1439,7 @@
     @if $input-skin-name == 'material' {
       top: -7px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or  $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       padding-right: 0;
       top: 16px;
     }
@@ -1705,7 +1724,7 @@
   .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-float-text.e-label-top,
   .e-float-input.e-input-focus input ~ label.e-float-text,
   .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       font-weight: $input-float-font-weight;
     }
     user-select: text;
@@ -1719,7 +1738,7 @@
   .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
   .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text.e-label-top,
   .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-label-top {
-    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
+    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       font-weight: $input-float-font-weight;
     }
     user-select: text;
@@ -2142,7 +2161,7 @@
   .e-input-group.e-rtl.e-corner .e-input-group-icon:hover,
   .e-input-group.e-control-wrapper .e-input-group-icon:hover,
   .e-input-group.e-control-wrapper.e-rtl.e-corner .e-input-group-icon:hover {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4') {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
       border-radius: $input-group-border-radius;
     }
   }
@@ -2435,7 +2454,7 @@
   .e-float-input.e-input-group textarea:focus,
   .e-float-input.e-input-group.e-control-wrapper input:focus,
   .e-float-input.e-input-group.e-control-wrapper textarea {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'tailwind' {
       box-shadow: none;
     }
   }
@@ -3462,8 +3481,8 @@
   .e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input:focus,
   .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus,
   .e-float-input.e-bigger.e-small textarea:focus {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
-      box-shadow: $imput-group-focus-box-shadow;
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
+      box-shadow: $input-group-focus-box-shadow;
     }
   }
 
@@ -3781,7 +3800,7 @@
   .e-float-input .e-input-in-wrap,
   .e-float-input.e-control-wrapper .e-input-in-wrap {
     width: 100%;
-    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       display: flex;
       position: relative;
     }
@@ -3824,7 +3843,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;
-    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: middle;
@@ -3915,11 +3934,16 @@
       padding-right: 0;
       transform: translate3d(-10px, -37px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if $input-skin-name == 'tailwind' {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -33px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -36px, 0) scale(1);
+    }
   }
 
   .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
@@ -3938,7 +3962,7 @@
     @if $input-skin-name == 'material' {
       top: -20px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       top: 14px;
     }
   }
@@ -3955,7 +3979,7 @@
     @if $input-skin-name == 'material' {
       top: -21px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       top: 16px;
     }
   }
@@ -3976,7 +4000,7 @@
     @if $input-skin-name == 'material' {
       top: -20px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       top: 16px;
     }
   }
@@ -3987,7 +4011,7 @@
     @if $input-skin-name == 'material' {
       top: -11px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       top: 15px;
     }
   }
@@ -4018,10 +4042,10 @@
     @if $input-skin-name == 'material' {
       top: -8px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
       top: 18px;
     }
-    @else if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'tailwind' {
       top: -11px;
     }
   }
@@ -4038,7 +4062,7 @@
     @if $input-skin-name == 'material' {
       top: -11px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
       top: 15px;
     }
   }
@@ -4232,7 +4256,7 @@
       padding-right: 0;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
-    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
+    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       font-weight: bold;
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
@@ -4257,13 +4281,13 @@
       top: 14px;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
-    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
+    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       font-weight: bold;
       padding-right: 0;
       top: 14px;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -40px, 0) scale(1);
@@ -4288,7 +4312,7 @@
       top: 17px;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
-    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
+    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       font-weight: bold;
       padding-right: 0;
       top: 17px;
@@ -4319,7 +4343,7 @@
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
 
-    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
+    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       font-weight: bold;
       padding-right: 0;
       top: 16px;
@@ -4348,7 +4372,7 @@
   .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  {
-    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'highcontrast' or $input-skin-name == 'bootstrap4' {
+    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'highcontrast' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       @include textarea-float-label-alignment;
       font-style: $input-font-style;
     }
@@ -4415,7 +4439,7 @@
       padding-right: 0;
       transform: translate3d(-10px, -43px, 0) scale(1);
     }
-    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
+    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       padding-right: 0;
       transform: translate3d(-10px, -37px, 0) scale(1);
     }
@@ -4522,7 +4546,7 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind'  or $input-skin-name == 'bootstrap5') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -40px, 0) scale(1);
@@ -4649,11 +4673,16 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -35px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -39px, 0) scale(1);
+    }
   }
 
   .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
@@ -4692,11 +4721,16 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -33px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -36px, 0) scale(1);
+    }
   }
 
   .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -4735,11 +4769,16 @@
       padding-right: 0;
       transform: translate3d(-10px, -39px, 0) scale(1);
     }
-    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark') {
+    @else if ($input-skin-name == 'tailwind') {
       font-weight: 500;
       padding-right: 0;
       transform: translate3d(-10px, -31px, 0) scale(1);
     }
+    @else if ($input-skin-name == 'bootstrap5') {
+      font-weight: 500;
+      padding-right: 0;
+      transform: translate3d(-10px, -35px, 0) scale(1);
+    }
   }
 
   .e-float-input textarea[disabled],
@@ -4984,7 +5023,7 @@
     @if $input-skin-name == 'material' {
       min-height: $input-bigger-min-height;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'tailwind' {
       min-height: $input-bigger-height;
     }
   }
@@ -5011,7 +5050,7 @@
   .e-outline.e-float-input textarea,
   .e-outline.e-float-input.e-control-wrapper textarea.e-input,
   .e-outline.e-float-input.e-control-wrapper textarea {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       width: calc(100% - 1px);
     }
   }
@@ -5042,7 +5081,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
   .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 $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border: 1px solid $outline-border-color;
       border-radius: 4px;
       border-width: 1px;
@@ -5086,7 +5125,7 @@
   .e-outline.e-float-input.e-input-group.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left),
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: transparent;
     }
   }
@@ -5096,7 +5135,7 @@
   .e-outline .e-input-group.e-control-wrapper,
   .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-input-font-size;
     }
   }
@@ -5113,7 +5152,7 @@
   .e-bigger .e-outline.e-input-group.e-disabled,
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-bigger-input-font-size;
     }
   }
@@ -5124,7 +5163,7 @@
   .e-bigger .e-outline.e-input-group.e-disabled .e-input-group-icon,
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled .e-input-group-icon,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled  .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-bigger-input-icon-font-size;
     }
   }
@@ -5156,7 +5195,7 @@
   .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error),
   .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error),
   .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-width: $outline-active-input-border;
     }
   }
@@ -5178,7 +5217,7 @@
   .e-outline.e-float-input:not(.e-float-icon-left).e-input-focus input,
   .e-outline.e-input-group:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-input-focus input.e-input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       padding: $outline-input-padding-top $outline-input-padding-left $outline-input-padding-bottom;
     }
@@ -5195,7 +5234,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea,
   .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input:focus,
   .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input:focus {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       margin: $outline-textarea-margin-top;
       padding: $zero-value $outline-input-padding-left $outline-input-padding-left;
@@ -5208,7 +5247,7 @@
   .e-outline.e-float-input.e-input-group.e-control-wrapper input,
   .e-outline.e-float-input input,
   .e-outline.e-float-input.e-control-wrapper input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       min-height: $outline-input-min-height;
     }
@@ -5226,7 +5265,7 @@
   .e-outline.e-float-input:not(.e-input-group) .e-float-line::after,
   .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
   .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       content: none;
     }
   }
@@ -5249,7 +5288,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-active-border-color;
       box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
     }
@@ -5259,7 +5298,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
   .e-outline.e-input-group.e-float-icon-left .e-input-in-wrap,
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border: $input-group-border-width;
       border-width: $input-group-border-width;
       margin-left: $zero-value;
@@ -5270,7 +5309,7 @@
   .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
   .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 $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin: 9px $outline-input-icon-margin-right 9px $zero-value;
     }
   }
@@ -5279,7 +5318,7 @@
   .e-outline.e-float-input.e-control-wrapper .e-clear-icon,
   .e-outline.e-input-group .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-input-clear-icon-font-size;
       padding: 9px $outline-input-icon-margin-right 9px $zero-value;
     }
@@ -5289,14 +5328,14 @@
   .e-outline.e-float-input.e-input-group.e-float-icon-left .e-input,
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left .e-input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding-left: $zero-value;
     }
   }
 
   .e-outline.e-input-group .e-input-group-icon,
   .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-input-icon-font-size;
       margin: 9px $outline-input-icon-margin-right 9px $zero-value;
     }
@@ -5316,7 +5355,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
   .e-outline.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 $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border: $zero-value;
     }
   }
@@ -5336,7 +5375,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small  .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $zero-value;
     }
   }
@@ -5356,7 +5395,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       min-height: $outline-small-input-min-height;
     }
@@ -5388,7 +5427,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-small-label-font-size;
     }
   }
@@ -5419,7 +5458,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-bigger-label-font-size;
     }
   }
@@ -5428,7 +5467,7 @@
   .e-outline.e-input-group.e-control-wrapper,
   .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-valid-input-font-size;
     }
   }
@@ -5441,7 +5480,7 @@
   .e-bigger .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger .e-outline.e-float-input.e-control-wrapper {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-bigger-input-font-size;
     }
   }
@@ -5454,7 +5493,7 @@
   .e-small .e-outline.e-float-input,
   .e-outline.e-float-input.e-control-wrapper.e-small,
   .e-small .e-outline.e-float-input.e-control-wrapper {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-small-input-font-size;
     }
   }
@@ -5475,7 +5514,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-small-bigger-input-font-size;
     }
   }
@@ -5558,7 +5597,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-small-bigger-label-font-size;
     }
   }
@@ -5593,7 +5632,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
   .e-small .e-outline.e-input-group.e-control-wrapper.e-input-focus input.e-input,
   .e-small .e-outline.e-input-group.e-input-focus input.e-input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding: $outline-small-input-padding-top $outline-small-input-padding-left;
     }
   }
@@ -5618,7 +5657,7 @@
   .e-small .e-outline.e-input-group textarea.e-input:focus,
   .e-small .e-outline.e-float-input textarea:focus,
   .e-small .e-outline.e-float-input.e-control-wrapper textarea:focus {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       margin: $outline-small-textarea-margin-top;
       padding: $zero-value $outline-small-input-padding-left $outline-small-input-padding-left;
@@ -5637,7 +5676,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $zero-value;
       margin-right: $outline-small-input-icon-margin-right;
     }
@@ -5647,7 +5686,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-small .e-outline.e-input-group .e-input-group-icon,
   .e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $zero-value;
       margin-right: $outline-small-input-icon-margin-left;
     }
@@ -5659,7 +5698,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
   .e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-small-clear-icon-font-size;
       padding: 7px $outline-small-input-icon-margin-left 7px $zero-value;
     }
@@ -5681,7 +5720,7 @@
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       min-height: $outline-bigger-input-min-height;
     }
@@ -5693,7 +5732,7 @@
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
   .e-bigger .e-outline.e-input-group .e-clear-icon,
   .e-bigger .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-bigger-clear-icon-font-size;
       padding: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left $outline-bigger-input-icon-padding $zero-value;
     }
@@ -5711,7 +5750,7 @@
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.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.e-bigger,
   .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $zero-value;
       margin-right: $outline-bigger-input-icon-margin-right;
     }
@@ -5723,7 +5762,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
   .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left  $outline-bigger-input-icon-padding $zero-value;
     }
   }
@@ -5758,7 +5797,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding: $outline-bigger-input-padding-top $outline-bigger-input-padding-left;
     }
   }
@@ -5785,7 +5824,7 @@
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea.e-input:focus,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea:focus,
   .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) textarea:focus {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin: $outline-bigger-textarea-maring-top;
       padding: $zero-value $outline-bigger-input-padding-left $outline-bigger-input-padding-left;
     }
@@ -5811,7 +5850,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       min-height: $outline-small-bigger-input-min-height;
     }
@@ -5856,7 +5895,7 @@
   .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding: $outline-small-bigger-input-margin-top $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-bottom;
     }
   }
@@ -5887,7 +5926,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea.e-input:focus,
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea:focus,
   .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left) textarea:focus {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       margin: $outline-bigger-textarea-maring-top;
       padding: $zero-value $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-left;
@@ -5900,7 +5939,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-small-bigger-clear-icon-font-size;
       padding: 9px $outline-small-bigger-icon-margin-left 9px $zero-value;
     }
@@ -5918,7 +5957,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $zero-value;
       margin-right: $outline-small-bigger-icon-margin-right;
     }
@@ -5930,7 +5969,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
   .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon,
   .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin: $outline-bigger-small-group-icon-top $outline-small-bigger-icon-margin-left $outline-bigger-small-group-icon-bottom $zero-value;
     }
   }
@@ -5939,7 +5978,7 @@
   .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-top: $outline-bigger-small-group-icon-top;
     }
   }
@@ -5948,7 +5987,7 @@
   .e-outline.e-float-input textarea,
   .e-outline.e-float-input.e-control-wrapper input,
   .e-outline.e-float-input.e-control-wrapper textarea {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border: $outline-input-border;
       border-width: $outline-input-group-border-width;
     }
@@ -5989,7 +6028,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
       display: flex;
       left: $zero-value;
@@ -6015,7 +6054,7 @@
   .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-bigger-label-line-height;
     }
   }
@@ -6034,7 +6073,7 @@
   .e-bigger .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-textarea-bigger-label-line-height;
     }
   }
@@ -6046,7 +6085,7 @@
   .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
   .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-small-label-line-height;
     }
   }
@@ -6058,7 +6097,7 @@
   .e-small.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
   .e-small.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-textarea-small-label-line-height;
     }
   }
@@ -6070,7 +6109,7 @@
   .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
   .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-label-line-height;
     }
   }
@@ -6080,7 +6119,7 @@
   .e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
   .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-textarea-label-line-height;
     }
   }
@@ -6104,7 +6143,7 @@
   .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-small-bigger-label-line-height;
     }
   }
@@ -6128,7 +6167,7 @@
   .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       line-height: $outline-textarea-small-bigger-label-line-height;
     }
   }
@@ -6139,7 +6178,7 @@
   .e-outline.e-float-input label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top: solid $outline-wrapper-border-infocused;
       border-top-color: transparent;
       box-shadow: inset $zero-value 1px transparent;
@@ -6168,7 +6207,7 @@
   .e-bigger .e-outline.e-float-input label.e-float-text::after,
   .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       min-width: $outline-bigger-label-min-width;
     }
   }
@@ -6185,7 +6224,7 @@
   .e-small .e-outline.e-float-input label.e-float-text::after,
   .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       min-width: $outline-small-label-min-width;
     }
   }
@@ -6202,7 +6241,7 @@
   .e-bigger.e-small .e-outline.e-float-input label.e-float-text::after,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
   .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       min-width: $outline-bigger-small-label-min-width;
     }
   }
@@ -6213,7 +6252,7 @@
   .e-outline.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: $outline-border-color;
       border-width: 1px;
     }
@@ -6225,7 +6264,7 @@
   .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: $input-success-color;
     }
   }
@@ -6236,7 +6275,7 @@
   .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-success-color;
     }
   }
@@ -6247,7 +6286,7 @@
   .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: $input-error-color;
     }
   }
@@ -6258,7 +6297,7 @@
   .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-error-color;
     }
   }
@@ -6269,7 +6308,7 @@
   .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: $input-warning-color;
     }
   }
@@ -6280,7 +6319,7 @@
   .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-warning-color;
     }
   }
@@ -6288,7 +6327,7 @@
   .e-outline label.e-float-text::before,
   .e-outline.e-float-input label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-left: solid 1px transparent;
       border-radius: $outline-label-margin $zero-value;
       left: $outline-label-before-left;
@@ -6299,7 +6338,7 @@
   .e-rtl.e-outline label.e-float-text::before,
   .e-rtl.e-outline.e-float-input label.e-float-text::before,
   .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-left: $zero-value;
       border-radius: $zero-value $outline-label-margin;
       left: $outline-label-before-left-rtl;
@@ -6309,7 +6348,7 @@
   .e-rtl.e-outline label.e-float-text::after,
   .e-rtl.e-outline.e-float-input label.e-float-text::after,
   .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-radius: $outline-label-border-radius $zero-value ;
       border-right: $zero-value;
       left: $outline-label-after-left-rtl;
@@ -6319,7 +6358,7 @@
   .e-outline label.e-float-text::after,
   .e-outline.e-float-input label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-radius: $zero-value $outline-label-border-radius;
       border-right: solid 1px transparent;
       flex-grow: 1;
@@ -6334,7 +6373,7 @@
   .e-outline.e-float-input.e-input-focus label.e-float-text::after,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::before,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: $input-active-border-color;
     }
   }
@@ -6351,7 +6390,7 @@
   .e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
   .e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
   .e-outline.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: transparent;
       box-shadow: inset 1px $zero-value $input-active-border-color, inset -1px $zero-value $input-active-border-color, inset $zero-value -1px $input-active-border-color;
     }
@@ -6383,7 +6422,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-floating-label-font-size;
       top: $outline-float-label-top;
       transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
@@ -6398,7 +6437,7 @@
   .e-rtl .e-outline.e-input-group .e-clear-icon,
   .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon,
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding-left: $outline-input-icon-margin-right;
       padding-right: $outline-input-icon-margin-left;
     }
@@ -6434,14 +6473,14 @@
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child
   .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-right: $zero-value;
     }
   }
 
   .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-input-icon-margin-right;
     }
   }
@@ -6451,7 +6490,7 @@
   .e-rtl .e-outline.e-input-group .e-input-group-icon,
   .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-input-icon-margin-right;
       margin-right: $outline-input-icon-margin-left;
     }
@@ -6468,7 +6507,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
   .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon
   .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding-left: $outline-small-input-icon-margin-left;
       padding-right: $zero-value;
     }
@@ -6482,7 +6521,7 @@
   .e-rtl.e-small .e-outline.e-input-group .e-input-group-icon,
   .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon
   .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-small-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6500,7 +6539,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
   .e-bigger.e-rtl .e-outline.e-input-group .e-clear-icon,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding-left: $outline-bigger-input-icon-margin-left;
       padding-right: $zero-value;
     }
@@ -6518,7 +6557,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-bigger-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6536,7 +6575,7 @@
   .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon,
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-small-bigger-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6554,7 +6593,7 @@
   .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-clear-icon,
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
   .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       padding-left: $outline-small-bigger-icon-margin-left;
       padding-right: $zero-value;
     }
@@ -6564,7 +6603,7 @@
   .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-input-icon-margin-right;
       margin-right: $zero-value;
     }
@@ -6580,7 +6619,7 @@
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
   .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-bigger-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6590,7 +6629,7 @@
   .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-small-input-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6607,7 +6646,7 @@
   .e-rtl.e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
   .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child .e-bigger {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       margin-left: $outline-small-bigger-icon-margin-left;
       margin-right: $zero-value;
     }
@@ -6694,7 +6733,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
   .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       top: $outline-float-label-top;
       transform: translate3d(0, 0, 0) scale(1);
     }
@@ -6744,7 +6783,7 @@
   .e-bigger .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-small-bigger-label-font-size;
     }
   }
@@ -6761,7 +6800,7 @@
   .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
   .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       top: $outline-float-label-top;
       transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
     }
@@ -6772,7 +6811,7 @@
   .e-outline.e-float-input textarea,
   .e-outline.e-float-input.e-control-wrapper textarea,
   .e-outline.e-float-input.e-input-group textarea {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-sizing: border-box;
     }
   }
@@ -6781,7 +6820,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) input:focus ~ label.e-float-text,
   .e-outline.e-float-input.e-valid-input:not(.e-input-focus) textarea:valid ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) textarea:focus ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $outline-label-font-color-with-value;
     }
   }
@@ -6794,7 +6833,7 @@
   .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
   .e-rtl.e-outline.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
   .e-small .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       top: $outline-float-label-top;
     }
   }
@@ -6809,7 +6848,7 @@
   .e-outline.e-small .e-float-input .e-clear-icon::before,
   .e-outline.e-small .e-input-group .e-clear-icon::before,
   .e-outline.e-small .e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-input-small-clear-icon;
     }
   }
@@ -6818,7 +6857,7 @@
   .e-outline.e-float-input.e-control-wrapper .e-clear-icon::before,
   .e-outline.e-input-group .e-clear-icon::before,
   .e-outline.e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-input-clear-icon;
     }
   }
@@ -6833,7 +6872,7 @@
   .e-outline.e-bigger .e-float-input .e-clear-icon::before,
   .e-outline.e-bigger .e-input-group .e-clear-icon::before,
   .e-outline.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-input-bigger-clear-icon;
     }
   }
@@ -6850,7 +6889,7 @@
   .e-outline.e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
   .e-outline.e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
   .e-outline.e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon::before {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       font-size: $outline-input-bigger-small-clear-icon;
     }
   }