@syncfusion/ej2-inputs 31.2.12 → 32.1.19

package/styles/numerictextbox/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 .e-filled.e-float-input.e-error label.e-float-text,
@@ -15,6 +85,54 @@
   color: var(--color-sf-danger) !important;
 }
 
+.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) {
+  border: 1px solid var(--color-sf-border);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  padding: 0 10px 0 12px;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  border-width: 1px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.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) {
+  border: 1px solid;
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 .e-input-group-icon.e-spin-up::before {
   content: "\e776";
   font-family: "e-icons";
@@ -49,6 +167,52 @@
   width: 0;
 }
 
+div.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 15px;
+}
+div.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: -15px;
+}
+div.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 15px;
+}
+div.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: -15px;
+}
+div.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 7px;
+}
+div.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: -8px;
+}
+
+.e-numeric.e-input-group.e-prepend-wrapper.e-filled input,
+.e-numeric.e-input-group.e-append-wrapper.e-filled input {
+  height: auto;
+}
+
+.e-numeric.e-input-group.e-prepend-wrapper.e-input-focus input.e-input,
+.e-numeric.e-input-group.e-prepend-wrapper input.e-input {
+  padding-left: 0;
+}
+
+.e-numeric.e-rtl.e-input-group.e-prepend-wrapper.e-input-focus input.e-input,
+.e-numeric.e-rtl.e-input-group.e-prepend-wrapper input.e-input {
+  padding-right: 0;
+}
+
 .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
   font-size: 14px;
 }
@@ -61,4 +225,59 @@
 
 .e-bigger .e-control-wrapper.e-numeric.e-input-group .e-input-group-icon, .e-bigger.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon {
   font-size: 18px;
+}
+
+div.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 19px;
+}
+div.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-numeric.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-numeric.e-input-group.e-append-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: -15px;
+}
+div.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 20px;
+}
+div.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-numeric.e-input-group.e-prepend-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-numeric.e-input-group.e-append-wrapper.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: -15px;
+}
+div.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom, div.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger div.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+span.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
+.e-bigger span.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+  top: 20px;
+}
+div.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top, div.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger div.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+span.e-bigger.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-numeric.e-input-group.e-prepend-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
+.e-bigger span.e-numeric.e-input-group.e-append-wrapper.e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+  top: -15px;
 }

package/styles/numerictextbox/tailwind3.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import '../input/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use '../input/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/otp-input/_bds-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $otp-input-width: 30px !default;
 $otp-input-height: 30px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,5 @@ $otp-input-underlined-bg-color: rgba(255, 255, 255, 0) !default;
 $otp-input-disabled-color: rgba(28, 27, 31, 1) !default;
 $otp-input-disabled-border-color: rgba(121, 116, 126, 1) !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('otp-input-bigger') {
   .e-bigger.e-otpinput,
   .e-bigger .e-otpinput {
@@ -16,7 +18,7 @@
         font-size: $otp-bigger-input-password-font-size;
       }
       &.e-input.e-otp-input-focus:focus {
-        padding-bottom: 0;
+        padding-bottom: $otp-input-zero-padding-margin;
       }
     }
     .e-otp-separator {
@@ -25,7 +27,7 @@
     }
     &.e-filled {
       .e-otp-input-field {
-        padding: 0;
+        padding: $otp-input-zero-padding-margin;
       }
     }
   }
@@ -49,7 +51,7 @@
         font-size: $otp-bigger-small-input-password-font-size;
       }
       &.e-input.e-otp-input-focus:focus {
-        padding-bottom: 0;
+        padding-bottom: $otp-input-zero-padding-margin;
       }
     }
     .e-otp-separator {
@@ -58,7 +60,7 @@
     }
     &.e-filled {
       .e-otp-input-field {
-        padding: 0;
+        padding: $otp-input-zero-padding-margin;
       }
     }
   }

package/styles/otp-input/_bootstrap-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 $otp-input-width: 34px !default;
 $otp-input-height: 34px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: $grey-f5 !default;
 $otp-input-disabled-border-color: $grey-ad !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $otp-input-width: 34px !default;
 $otp-input-height: 34px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: $grey-99 !default;
 $otp-input-disabled-border-color: $grey-cc !default;
 $otp-input-disabled-bg-color: $grey-lighter !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 $otp-input-width: 30px !default;
 $otp-input-height: 30px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: $gray-600 !default;
 $otp-input-disabled-border-color: $gray-400 !default;
 $otp-input-disabled-bg-color: $gray-200 !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_bootstrap5-dark-definition.scss

@@ -1 +1,62 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+$otp-input-width: 32px !default;
+$otp-input-height: 32px !default;
+$otp-input-gap: 12px !default;
+$otp-separator-input-gap: 4px !default;
+$otp-input-padding: 0 !default;
+$otp-input-font-size: 14px !default;
+$otp-input-font-weight: 400 !default;
+$otp-input-password-font-size: 18px !default;
+$otp-input-line-height: 22px !default;
+$otp-input-border-radius-outlined: 4px !default;
+$otp-input-border-radius-underlined: 4px 4px 0 0 !default;
+$otp-input-border-radius-filled: 4px 4px 0 0 !default;
+$otp-separator-font-size: 14px !default;
+$otp-separator-font-weight: 400 !default;
+$otp-separator-line-height: 22px !default;
+
+$otp-small-input-width: 26px !default;
+$otp-small-input-height: 26px !default;
+$otp-small-input-gap: 8px !default;
+$otp-small-separator-input-gap: 4px !default;
+$otp-small-input-font-size: 12px !default;
+$otp-small-input-password-font-size: 18px !default;
+$otp-small-input-line-height: 18px !default;
+$otp-small-separator-font-size: 12px !default;
+$otp-small-separator-line-height: 18px !default;
+
+$otp-bigger-small-input-width: 34px !default;
+$otp-bigger-small-input-height: 34px !default;
+$otp-bigger-small-input-gap: 12px !default;
+$otp-bigger-small-separator-input-gap: 6px !default;
+$otp-bigger-small-input-font-size: 14px !default;
+$otp-bigger-small-input-password-font-size: 20px !default;
+$otp-bigger-small-input-line-height: 22px !default;
+$otp-bigger-small-separator-font-size: 14px !default;
+$otp-bigger-small-separator-line-height: 22px !default;
+
+$otp-bigger-input-width: 38px !default;
+$otp-bigger-input-height: 38px !default;
+$otp-bigger-input-gap: 16px !default;
+$otp-bigger-separator-input-gap: 8px !default;
+$otp-bigger-input-font-size: 16px !default;
+$otp-bigger-input-password-font-size: 20px !default;
+$otp-bigger-input-line-height: 24px !default;
+$otp-bigger-separator-font-size: 16px !default;
+$otp-bigger-separator-line-height: 24px !default;
+
+$otp-input-text-color: $content-text-color !default;
+$otp-background-color: $content-bg-color !default;
+$otp-input-border-color: $border !default;
+$otp-input-border-bottom-color: $border !default;
+$otp-input-filled-bg-color: $content-bg-color-alt1 !default;
+$otp-input-error-color: $danger !default;
+$otp-input-success-color: $success !default;
+$otp-input-warning-color: $warning !default;
+$otp-input-separator-color: $border !default;
+$otp-input-underlined-bg-color: $transparent !default;
+$otp-input-disabled-color: $content-text-color-disabled !default;
+$otp-input-disabled-border-color: $border !default;
+$otp-input-disabled-bg-color: $content-bg-color-alt2 !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: $transparent !default;
 $otp-input-disabled-color: $content-text-color-disabled !default;
 $otp-input-disabled-border-color: $border !default;
 $otp-input-disabled-bg-color: $content-bg-color-alt2 !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_bootstrap5.3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -7,9 +9,9 @@ $otp-input-font-size: 14px !default;
 $otp-input-font-weight: 400 !default;
 $otp-input-password-font-size: 18px !default;
 $otp-input-line-height: 22px !default;
-$otp-input-border-radius-outlined: 4px !default;
-$otp-input-border-radius-underlined: 4px 4px 0 0 !default;
-$otp-input-border-radius-filled: 4px 4px 0 0 !default;
+$otp-input-border-radius-outlined: $radius-4 !default;
+$otp-input-border-radius-underlined: $radius-4 $radius-4 $radius-0 $radius-0 !default;
+$otp-input-border-radius-filled: $radius-4 $radius-4 $radius-0 $radius-0 !default;
 $otp-separator-font-size: 14px !default;
 $otp-separator-font-weight: 400 !default;
 $otp-separator-line-height: 22px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: $transparent !default;
 $otp-input-disabled-color: $content-text-color-disabled !default;
 $otp-input-disabled-border-color: $border-disabled !default;
 $otp-input-disabled-bg-color: $content-bg-color-disabled !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_fabric-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: $neutral-tertiary !default;
 $otp-input-disabled-border-color: $neutral-light !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: $neutral-tertiary !default;
 $otp-input-disabled-border-color: $neutral-light !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_fluent-dark-definition.scss

@@ -1 +1,62 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+$otp-input-width: 32px !default;
+$otp-input-height: 32px !default;
+$otp-input-gap: 12px !default;
+$otp-separator-input-gap: 4px !default;
+$otp-input-padding: 0 !default;
+$otp-input-font-size: 14px !default;
+$otp-input-font-weight: 400 !default;
+$otp-input-password-font-size: 18px !default;
+$otp-input-line-height: 22px !default;
+$otp-input-border-radius-outlined: 4px !default;
+$otp-input-border-radius-underlined: 4px 4px 0 0 !default;
+$otp-input-border-radius-filled: 4px 4px 0 0 !default;
+$otp-separator-font-size: 14px !default;
+$otp-separator-font-weight: 400 !default;
+$otp-separator-line-height: 22px !default;
+
+$otp-small-input-width: 26px !default;
+$otp-small-input-height: 26px !default;
+$otp-small-input-gap: 8px !default;
+$otp-small-separator-input-gap: 4px !default;
+$otp-small-input-font-size: 12px !default;
+$otp-small-input-password-font-size: 18px !default;
+$otp-small-input-line-height: 18px !default;
+$otp-small-separator-font-size: 12px !default;
+$otp-small-separator-line-height: 18px !default;
+
+$otp-bigger-small-input-width: 34px !default;
+$otp-bigger-small-input-height: 34px !default;
+$otp-bigger-small-input-gap: 12px !default;
+$otp-bigger-small-separator-input-gap: 6px !default;
+$otp-bigger-small-input-font-size: 14px !default;
+$otp-bigger-small-input-password-font-size: 20px !default;
+$otp-bigger-small-input-line-height: 22px !default;
+$otp-bigger-small-separator-font-size: 14px !default;
+$otp-bigger-small-separator-line-height: 22px !default;
+
+$otp-bigger-input-width: 38px !default;
+$otp-bigger-input-height: 38px !default;
+$otp-bigger-input-gap: 16px !default;
+$otp-bigger-separator-input-gap: 8px !default;
+$otp-bigger-input-font-size: 16px !default;
+$otp-bigger-input-password-font-size: 20px !default;
+$otp-bigger-input-line-height: 24px !default;
+$otp-bigger-separator-font-size: 16px !default;
+$otp-bigger-separator-line-height: 24px !default;
+
+$otp-input-text-color: $content-text-color !default;
+$otp-background-color: $content-bg-color !default;
+$otp-input-border-color: $border !default;
+$otp-input-border-bottom-color: $border !default;
+$otp-input-filled-bg-color: $content-bg-color-alt1 !default;
+$otp-input-error-color: $danger !default;
+$otp-input-success-color: $success !default;
+$otp-input-warning-color: $warning !default;
+$otp-input-separator-color: $border !default;
+$otp-input-underlined-bg-color: $transparent !default;
+$otp-input-disabled-color: $content-text-color-disabled !default;
+$otp-input-disabled-border-color: $border !default;
+$otp-input-disabled-bg-color: $content-bg-color-alt2 !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_fluent-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: $transparent !default;
 $otp-input-disabled-color: $content-text-color-disabled !default;
 $otp-input-disabled-border-color: $border-disabled !default;
 $otp-input-disabled-bg-color: $content-bg-color-alt2 !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_fluent2-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -7,9 +9,9 @@ $otp-input-font-size: 14px !default;
 $otp-input-font-weight: 400 !default;
 $otp-input-password-font-size: 18px !default;
 $otp-input-line-height: 20px !default;
-$otp-input-border-radius-outlined: 4px !default;
-$otp-input-border-radius-underlined: 4px 4px 0 0 !default;
-$otp-input-border-radius-filled: 4px !default;
+$otp-input-border-radius-outlined: $radius-4 !default;
+$otp-input-border-radius-underlined: $radius-4 $radius-4 $radius-0 $radius-0 !default;
+$otp-input-border-radius-filled: $radius-4 !default;
 $otp-separator-font-size: 14px !default;
 $otp-separator-font-weight: 400 !default;
 $otp-separator-line-height: 20px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: $transparent !default;
 $otp-input-disabled-color: $content-text-color-disabled !default;
 $otp-input-disabled-border-color: $border-disabled !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_fusionnew-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
 $otp-input-width: 30px !default;
 $otp-input-height: 30px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: rgba(255, 255, 255, 0) !default;
 $otp-input-disabled-color: rgba(28, 27, 31, 1) !default;
 $otp-input-disabled-border-color: rgba(121, 116, 126, 1) !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: $disable !default;
 $otp-input-disabled-border-color: $disable !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_highcontrast-light-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
 $otp-input-width: 30px !default;
 $otp-input-height: 30px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: rgba(255, 255, 255, 0) !default;
 $otp-input-disabled-color: rgba(28, 27, 31, 1) !default;
 $otp-input-disabled-border-color: rgba(121, 116, 126, 1) !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_layout.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('otp-input-layout') {
   .e-otpinput {
     display: flex;
@@ -22,7 +24,7 @@
         font-size: $otp-input-password-font-size;
       }
       &.e-input.e-otp-input-focus:focus {
-        padding-bottom: 0;
+        padding-bottom: $otp-input-zero-padding-margin;
       }
     }
     &.e-outline {
@@ -38,7 +40,7 @@
     &.e-filled {
       .e-otp-input-field {
         border-radius: $otp-input-border-radius-filled;
-        padding: 0;
+        padding: $otp-input-zero-padding-margin;
       }
     }
     .e-otp-separator {
@@ -51,7 +53,7 @@
       /* stylelint-disable property-no-vendor-prefix */
       -webkit-appearance: none;
       /* stylelint-enable property-no-vendor-prefix */
-      margin: 0;
+      margin: $otp-input-zero-padding-margin;
     }
     // Remove spin buttons in Firefox
     input[type = 'number'] {
@@ -78,7 +80,7 @@
         font-size: $otp-small-input-password-font-size;
       }
       &.e-input.e-otp-input-focus:focus {
-        padding-bottom: 0;
+        padding-bottom: $otp-input-zero-padding-margin;
       }
     }
     .e-otp-separator {
@@ -87,7 +89,7 @@
     }
     &.e-filled {
       .e-otp-input-field {
-        padding: 0;
+        padding: $otp-input-zero-padding-margin;
       }
     }
   }