@syncfusion/ej2-inputs 29.2.4 → 30.1.37

package/styles/material-lite.css

@@ -3213,6 +3213,13 @@ textarea.e-outline,
   font-size: 16px;
 }
 
+.e-float-text-content,
+.e-float-text-content.e-icon {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.42);
+  background: transparent;
+}
+
 .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline label.e-float-text,
@@ -7903,10 +7910,6 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color .e-split-preview {
   border-radius: 2px;
 }
-.e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
-  padding: 0 4px;
-}
 .e-colorpicker-wrapper *,
 .e-colorpicker-container * {
   -webkit-box-sizing: border-box;
@@ -9174,6 +9177,7 @@ body.e-colorpicker-overflow {
 }
 .e-speech-to-text.e-btn .e-btn-icon {
   font-size: 14px;
+  margin-top: 1px;
   line-height: 2px;
   width: 2em;
 }
@@ -9187,6 +9191,7 @@ body.e-colorpicker-overflow {
 
 .e-speech-to-text.e-round .e-btn-icon {
   font-size: 16px;
+  margin-top: 1px;
 }
 
 @-webkit-keyframes listening {

package/styles/material.css

@@ -3213,6 +3213,13 @@ textarea.e-outline,
   font-size: 16px;
 }
 
+.e-float-text-content,
+.e-float-text-content.e-icon {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.42);
+  background: transparent;
+}
+
 .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline label.e-float-text,
@@ -13822,10 +13829,6 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color .e-split-preview {
   border-radius: 2px;
 }
-.e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
-.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
-  padding: 0 4px;
-}
 .e-colorpicker-wrapper *,
 .e-colorpicker-container * {
   -webkit-box-sizing: border-box;
@@ -15429,6 +15432,7 @@ body.e-colorpicker-overflow {
 }
 .e-speech-to-text.e-btn .e-btn-icon {
   font-size: 14px;
+  margin-top: 1px;
   line-height: 2px;
   width: 2em;
 }
@@ -15442,6 +15446,7 @@ body.e-colorpicker-overflow {
 
 .e-speech-to-text.e-round .e-btn-icon {
   font-size: 16px;
+  margin-top: 1px;
 }
 
 @-webkit-keyframes listening {
@@ -15509,11 +15514,13 @@ body.e-colorpicker-overflow {
   font-size: 16px;
   line-height: 1px;
   width: 2em;
+  margin-top: -1px;
 }
 
 .e-bigger .e-speech-to-text.e-round .e-btn-icon,
 .e-bigger.e-speech-to-text.e-round .e-btn-icon {
   font-size: 22px;
+  margin-top: 1px;
 }
 
 .smart-textarea-suggestion-overlay {

package/styles/material3-dark-lite.css

@@ -3149,6 +3149,13 @@ textarea.e-outline,
   font-size: 16px;
 }
 
+.e-float-text-content,
+.e-float-text-content.e-icon {
+  font-size: 14px;
+  color: rgba(var(--color-sf-outline));
+  background: transparent;
+}
+
 .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline label.e-float-text,
@@ -7719,7 +7726,6 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
   font-family: initial;
   line-height: 14px;
-  padding: 5px 8px;
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-radius: 4px;
@@ -7728,6 +7734,7 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder,
   border-right-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
@@ -7745,9 +7752,9 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder,
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
-  padding: 5px 8px;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn {
@@ -9047,6 +9054,9 @@ body.e-colorpicker-overflow {
 }
 .e-speech-to-text.e-btn .e-btn-icon {
   font-size: 14px;
+  margin-top: 1px;
+  line-height: 2px;
+  width: 2em;
 }
 .e-speech-to-text.e-btn:disabled {
   pointer-events: none;

package/styles/material3-dark.css

@@ -3149,6 +3149,13 @@ textarea.e-outline,
   font-size: 16px;
 }
 
+.e-float-text-content,
+.e-float-text-content.e-icon {
+  font-size: 14px;
+  color: rgba(var(--color-sf-outline));
+  background: transparent;
+}
+
 .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline label.e-float-text,
@@ -13737,7 +13744,6 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
   font-family: initial;
   line-height: 14px;
-  padding: 5px 8px;
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-radius: 4px;
@@ -13746,6 +13752,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
   border-right-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
@@ -13763,9 +13770,9 @@ textarea.e-input.e-bigger.e-small.e-outline,
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
-  padding: 5px 8px;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn {
@@ -15428,6 +15435,9 @@ body.e-colorpicker-overflow {
 }
 .e-speech-to-text.e-btn .e-btn-icon {
   font-size: 14px;
+  margin-top: 1px;
+  line-height: 2px;
+  width: 2em;
 }
 .e-speech-to-text.e-btn:disabled {
   pointer-events: none;
@@ -15504,11 +15514,15 @@ body.e-colorpicker-overflow {
 .e-bigger .e-speech-to-text.e-btn .e-btn-icon,
 .e-bigger.e-speech-to-text.e-btn .e-btn-icon {
   font-size: 16px;
+  line-height: 1px;
+  width: 2em;
+  margin-top: 0;
 }
 
 .e-bigger .e-speech-to-text.e-round .e-btn-icon,
 .e-bigger.e-speech-to-text.e-round .e-btn-icon {
   font-size: 22px;
+  margin-top: 0;
 }
 
 .smart-textarea-suggestion-overlay {

package/styles/material3-lite.css

@@ -3151,6 +3151,13 @@ textarea.e-outline,
   font-size: 16px;
 }
 
+.e-float-text-content,
+.e-float-text-content.e-icon {
+  font-size: 14px;
+  color: rgba(var(--color-sf-outline));
+  background: transparent;
+}
+
 .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline label.e-float-text,
@@ -7721,7 +7728,6 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
   font-family: initial;
   line-height: 14px;
-  padding: 5px 8px;
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-radius: 4px;
@@ -7730,6 +7736,7 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder,
   border-right-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
@@ -7747,9 +7754,9 @@ textarea.e-filled.e-disabled.e-input::-webkit-input-placeholder,
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
-  padding: 5px 8px;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn {
@@ -9049,6 +9056,9 @@ body.e-colorpicker-overflow {
 }
 .e-speech-to-text.e-btn .e-btn-icon {
   font-size: 14px;
+  margin-top: 1px;
+  line-height: 2px;
+  width: 2em;
 }
 .e-speech-to-text.e-btn:disabled {
   pointer-events: none;

package/styles/material3.css

@@ -3151,6 +3151,13 @@ textarea.e-outline,
   font-size: 16px;
 }
 
+.e-float-text-content,
+.e-float-text-content.e-icon {
+  font-size: 14px;
+  color: rgba(var(--color-sf-outline));
+  background: transparent;
+}
+
 .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
 .e-outline label.e-float-text,
@@ -13739,7 +13746,6 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
   font-family: initial;
   line-height: 14px;
-  padding: 5px 8px;
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-radius: 4px;
@@ -13748,6 +13754,7 @@ textarea.e-input.e-bigger.e-small.e-outline,
   border-right-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
@@ -13765,9 +13772,9 @@ textarea.e-input.e-bigger.e-small.e-outline,
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
-  padding: 5px 8px;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
+  padding: 3px 8px;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-dropdown-btn.e-icon-btn {
@@ -15430,6 +15437,9 @@ body.e-colorpicker-overflow {
 }
 .e-speech-to-text.e-btn .e-btn-icon {
   font-size: 14px;
+  margin-top: 1px;
+  line-height: 2px;
+  width: 2em;
 }
 .e-speech-to-text.e-btn:disabled {
   pointer-events: none;
@@ -15506,11 +15516,15 @@ body.e-colorpicker-overflow {
 .e-bigger .e-speech-to-text.e-btn .e-btn-icon,
 .e-bigger.e-speech-to-text.e-btn .e-btn-icon {
   font-size: 16px;
+  line-height: 1px;
+  width: 2em;
+  margin-top: 0;
 }
 
 .e-bigger .e-speech-to-text.e-round .e-btn-icon,
 .e-bigger.e-speech-to-text.e-round .e-btn-icon {
   font-size: 22px;
+  margin-top: 0;
 }
 
 .smart-textarea-suggestion-overlay {

package/styles/speech-to-text/_bds-definition.scss

@@ -12,6 +12,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 13px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -23,3 +24,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 18px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_bigger.scss

@@ -10,6 +10,10 @@
     min-width: $stt-bigger-min-width;
     min-height: $stt-bigger-min-height;
     padding: $stt-bigger-padding;
+    @if ($skin-name == 'FluentUI') {
+      line-height: 0;
+      display: inline;
+    }
     &.e-round {
       width: $stt-bigger-round-width;
       height: $stt-bigger-round-height;
@@ -17,21 +21,12 @@
     }
     .e-btn-icon {
       font-size: $stt-bigger-font-size;
-      @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'material3') {
+      @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
         line-height: 1px;
         width: 2em;
       }
-      @if ($skin-name == 'bootstrap5.3' or $skin-name == 'fabric') {
-        margin-top: 1px;
-      }
-      @if ($skin-name == 'bootstrap5') {
-        margin-top: 0;
-      }
-      @if ($skin-name == 'FluentUI' or $skin-name == 'fabric-dark') {
-        margin-top: -1px;
-      }
-      @if ($skin-name == 'fluent2') {
-        margin-top: 2px;
+      @if ($skin-name != 'bootstrap4' or $skin-name != 'bootstrap' or $skin-name != 'bootstrap-dark') {
+        margin-top: $stt-bigger-margin-top;
       }
     }
   }
@@ -40,6 +35,15 @@
   .e-bigger.e-speech-to-text.e-round {
     .e-btn-icon {
       font-size: $stt-bigger-btn-font-size;
+      @if ($skin-name == 'FluentUI') {
+        margin-top: -2px;
+      }
+      @if ($skin-name == 'fluent2'or $skin-name == 'Material3') {
+        margin-top: 0;
+      }
+      @if ($skin-name == 'material' or $skin-name == 'fabric-dark') {
+        margin-top: 1px;
+      }
     }
   }
 }

package/styles/speech-to-text/_bootstrap-dark-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 14px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: -1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 500 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_bootstrap-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 14px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: -1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 500 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 16px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_bootstrap4-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: -1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 500 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 24px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_bootstrap5-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 400 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 22px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_bootstrap5.3-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 22px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 22px !default;
+$stt-bigger-margin-top: 1px !default;

package/styles/speech-to-text/_fabric-dark-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 14px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 2px !default;

package/styles/speech-to-text/_fabric-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 1px !default;

package/styles/speech-to-text/_fluent-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 14px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 22px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 18px !default;
+$stt-bigger-margin-top: -3px !default;

package/styles/speech-to-text/_fluent2-definition.scss

@@ -12,6 +12,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -23,3 +24,4 @@ $stt-bigger-btn-font-size: 22px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 2px !default;

package/styles/speech-to-text/_fusionnew-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 15px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 16px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 21px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_highcontrast-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 500 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 2px !default;

package/styles/speech-to-text/_highcontrast-light-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 14px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 16px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 19px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_layout.scss

@@ -7,6 +7,9 @@
     min-width: $stt-min-width;
     min-height: $stt-min-height;
     padding: $stt-padding;
+    @if ($skin-name == 'fluent2') {
+      line-height: 0;
+    }
     &.e-round {
       width: $stt-round-width;
       height: $stt-round-height;
@@ -14,22 +17,11 @@
     }
     .e-btn-icon {
       font-size: $stt-font-size;
-      @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'material3') {
+      margin-top: $stt-margin-top;
+      @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
         line-height: 2px;
         width: 2em;
       }
-      @if ($skin-name == 'bootstrap5.3' or $skin-name == 'fabric') {
-        margin-top: 1px;
-      }
-      @if ($skin-name == 'bootstrap5') {
-        margin-top: 0;
-      }
-      @if ($skin-name == 'FluentUI' or $skin-name == 'fabric-dark') {
-        margin-top: -1px;
-      }
-      @if ($skin-name == 'fluent2') {
-        margin-top: 2px;
-      }
     }
     &:disabled {
       pointer-events: none;
@@ -42,6 +34,12 @@
   .e-speech-to-text.e-round {
     .e-btn-icon {
       font-size: $stt-btn-font-size;
+      @if ($skin-name == 'FluentUI') {
+        margin-top: 0;
+      }
+      @if ($skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric-dark') {
+        margin-top: 1px;
+      }
     }
   }
 

package/styles/speech-to-text/_material-dark-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 14px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 500 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 22px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 22px !default;
+$stt-bigger-margin-top: -1px !default;

package/styles/speech-to-text/_material-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 14px !default;
+$stt-margin-top: 1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 22px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: -1px !default;

package/styles/speech-to-text/_material3-definition.scss

@@ -11,6 +11,7 @@ $stt-btn-font-size: 18px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 14px !default;
+$stt-margin-top: 1px !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 500 !default;
@@ -22,3 +23,4 @@ $stt-bigger-btn-font-size: 22px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 16px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_tailwind-definition.scss

@@ -12,6 +12,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 16px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 500 !default;
@@ -23,3 +24,4 @@ $stt-bigger-btn-font-size: 20px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 0 !default;

package/styles/speech-to-text/_tailwind3-definition.scss

@@ -12,6 +12,7 @@ $stt-btn-font-size: 16px !default;
 $stt-min-height: 40px !default;
 $stt-min-width: 40px !default;
 $stt-padding: 0 14px !default;
+$stt-margin-top: 0 !default;
 
 $stt-bigger-border-radius: $stt-border-radius !default;
 $stt-bigger-font-weight: 600 !default;
@@ -23,3 +24,4 @@ $stt-bigger-btn-font-size: 24px !default;
 $stt-bigger-min-height: 52px !default;
 $stt-bigger-min-width: 52px !default;
 $stt-bigger-padding: 0 20px !default;
+$stt-bigger-margin-top: 0 !default;