@syncfusion/ej2-splitbuttons 26.2.10 → 27.1.48

package/styles/progress-button/tailwind-dark.css

@@ -338,79 +338,6 @@
   }
 }
 
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 14px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
-  padding-bottom: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
-  padding-top: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 12px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
-  padding-bottom: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
-  padding-top: 12px;
-}
-
 /*! Progress Button Theme */
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg {
   fill: #fff;
@@ -658,4 +585,77 @@
 
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #fff;
+}
+
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 14px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
+  padding-bottom: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
+  padding-top: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 12px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
+  padding-bottom: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
+  padding-top: 12px;
 }

package/styles/progress-button/tailwind-dark.scss

@@ -3,3 +3,4 @@
 @import 'ej2-popups/styles/spinner/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/progress-button/tailwind.css

@@ -338,79 +338,6 @@
   }
 }
 
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 14px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
-  padding-bottom: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
-  padding-bottom: 20px;
-  padding-top: 20px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
-  padding-top: 14px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
-  padding-left: 12px;
-  padding-right: 0;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
-  padding-left: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
-  padding-left: 0;
-  padding-right: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
-  padding-bottom: 12px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
-  padding-bottom: 16px;
-  padding-top: 16px;
-}
-*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
-*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
-  padding-top: 12px;
-}
-
 /*! Progress Button Theme */
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg {
   fill: #374151;
@@ -658,4 +585,77 @@
 
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #374151;
+}
+
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 14px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-spinner {
+  padding-bottom: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom {
+  padding-bottom: 20px;
+  padding-top: 20px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-bottom .e-spinner {
+  padding-top: 14px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round) .e-spinner {
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-left:not(.e-round).e-rtl .e-spinner {
+  padding-left: 12px;
+  padding-right: 0;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round) .e-spinner {
+  padding-left: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-right:not(.e-round).e-rtl .e-spinner {
+  padding-left: 0;
+  padding-right: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-top .e-spinner {
+  padding-bottom: 12px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom {
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+*.e-bigger .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner,
+*.e-bigger.e-progress-btn.e-progress-active:not(.e-hide-spinner).e-small.e-spin-bottom .e-spinner {
+  padding-top: 12px;
 }

package/styles/progress-button/tailwind.scss

@@ -3,3 +3,4 @@
 @import 'ej2-popups/styles/spinner/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/split-button/_bigger.scss

@@ -0,0 +1,149 @@
+@include export-module('split-button-bigger') {
+  .e-bigger .e-split-btn-wrapper,
+  .e-bigger.e-split-btn-wrapper {
+    @if $skin-name == 'Material3' {
+      border-radius: 4px;
+      box-shadow: $btn-box-shadow;
+    }
+    .e-split-btn {
+      @if $skin-name == 'Material3' {
+        border-radius: 4px;
+        box-shadow: none;
+      }
+      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
+        padding-left: $split-btn-icon-btn-padding-bigger;
+        padding-right: $split-btn-icon-btn-padding-bigger;
+      }
+      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+      @else {
+        padding-left: 12px;
+        padding-right: 6px;
+      }
+
+      &.e-top-icon-btn {
+        padding-bottom: 12px;
+        padding-top: 12px;
+      }
+
+      .e-btn-icon {
+        font-size: $drop-down-btn-icon-font-size-bigger;
+        margin-left: 0;
+        @if $skin-name == 'FluentUI' {
+          padding-right: 8px;
+        }
+        @else {
+          padding-right: 10px;
+        }
+        width: auto;
+        @if $skin-name == 'Material3' {
+          border-radius: 4px;
+        }
+      }
+
+      .e-icon-top {
+        padding-bottom: 6px;
+        padding-right: 0;
+      }
+
+      &.e-icon-btn {
+        padding-left: $split-btn-icon-btn-padding-bigger;
+        padding-right: $split-btn-icon-btn-padding-bigger;
+
+        .e-btn-icon {
+          padding-right: 0;
+        }
+      }
+    }
+
+    .e-dropdown-btn {
+      @if $skin-name == 'bootstrap4' {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+      @else {
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+        z-index: 1;
+      }
+    }
+
+    &.e-rtl {
+      .e-split-btn {
+        @if $skin-name == 'bootstrap4' {
+          padding-left: $split-btn-icon-btn-padding-bigger;
+          padding-right: $split-btn-icon-btn-padding-bigger;
+        }
+        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          padding-left: 12px;
+          padding-right: 12px;
+        }
+        @else {
+          padding-left: 6px;
+          padding-right: 12px;
+        }
+
+        .e-btn-icon {
+          @if $skin-name == 'FluentUI' {
+            padding-left: 8px;
+          }
+          @else {
+            padding-left: 10px;
+          }
+          padding-right: 0;
+          @if $skin-name == 'Material3' {
+            border-radius: 4px;
+          }
+        }
+
+        .e-icon-top {
+          padding-left: 0;
+        }
+
+        &.e-icon-btn {
+          padding-left: $split-btn-icon-btn-padding-bigger;
+          padding-right: $split-btn-icon-btn-padding-bigger;
+
+          .e-btn-icon {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+
+    &.e-vertical {
+      .e-split-btn {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
+          padding-bottom: $split-btn-icon-btn-padding-bigger;
+          padding-right: $split-btn-icon-btn-padding-bigger;
+        }
+        @else {
+          padding-bottom: 6px;
+          padding-right: 12px;
+        }
+      }
+
+      .e-dropdown-btn {
+        @if $skin-name == 'bootstrap4' {
+          padding-bottom: $split-btn-icon-btn-padding-bigger;
+          padding-top: $split-btn-icon-btn-padding-bigger;
+        }
+        @else {
+          padding-bottom: 4px;
+          padding-top: 4px;
+        }
+        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          z-index: 1;
+        }
+
+        .e-icon-bottom {
+          padding-top: 0;
+        }
+      }
+    }
+  }
+}

package/styles/split-button/_layout.scss

@@ -37,13 +37,13 @@
       }
 
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
           box-shadow: none;
         }
       }
 
       &:focus {
-        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           box-shadow: $split-btn-active-box-shadow;
           z-index: $split-btn-zindex;
         }
@@ -123,13 +123,13 @@
         padding-left: 4px;
         padding-right: 4px;
       }
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         z-index: 1;
       }
 
       &:focus,
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
           box-shadow: none;
         }
       }
@@ -160,18 +160,18 @@
     }
 
     .e-btn {
-      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' and $theme-name != 'Material3' {
+      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' and $theme-name != 'Material3' {
         box-shadow: none;
       }
 
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' {
           box-shadow: none;
         }
       }
 
       &:focus {
-        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           box-shadow: $split-btn-active-box-shadow;
           z-index: $split-btn-zindex;
         }
@@ -188,7 +188,7 @@
 
       &:active {
         box-shadow: $split-btn-active-box-shadow;
-        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           z-index: $split-btn-zindex;
         }
       }
@@ -345,152 +345,4 @@
       }
     }
   }
-
-  .e-bigger .e-split-btn-wrapper,
-  .e-bigger.e-split-btn-wrapper {
-    @if $skin-name == 'Material3' {
-      border-radius: 4px;
-      box-shadow: $btn-box-shadow;
-    }
-    .e-split-btn {
-      @if $skin-name == 'Material3' {
-        border-radius: 4px;
-        box-shadow: none;
-      }
-      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
-        padding-left: $split-btn-icon-btn-padding-bigger;
-        padding-right: $split-btn-icon-btn-padding-bigger;
-      }
-      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-        padding-left: 16px;
-        padding-right: 16px;
-      }
-      @else {
-        padding-left: 12px;
-        padding-right: 6px;
-      }
-
-      &.e-top-icon-btn {
-        padding-bottom: 12px;
-        padding-top: 12px;
-      }
-
-      .e-btn-icon {
-        font-size: $drop-down-btn-icon-font-size-bigger;
-        margin-left: 0;
-        @if $skin-name == 'FluentUI' {
-          padding-right: 8px;
-        }
-        @else {
-          padding-right: 10px;
-        }
-        width: auto;
-        @if $skin-name == 'Material3' {
-          border-radius: 4px;
-        }
-      }
-
-      .e-icon-top {
-        padding-bottom: 6px;
-        padding-right: 0;
-      }
-
-      &.e-icon-btn {
-        padding-left: $split-btn-icon-btn-padding-bigger;
-        padding-right: $split-btn-icon-btn-padding-bigger;
-
-        .e-btn-icon {
-          padding-right: 0;
-        }
-      }
-    }
-
-    .e-dropdown-btn {
-      @if $skin-name == 'bootstrap4' {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-      @else {
-        padding-left: 4px;
-        padding-right: 4px;
-      }
-      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-        z-index: 1;
-      }
-    }
-
-    &.e-rtl {
-      .e-split-btn {
-        @if $skin-name == 'bootstrap4' {
-          padding-left: $split-btn-icon-btn-padding-bigger;
-          padding-right: $split-btn-icon-btn-padding-bigger;
-        }
-        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-          padding-left: 12px;
-          padding-right: 12px;
-        }
-        @else {
-          padding-left: 6px;
-          padding-right: 12px;
-        }
-
-        .e-btn-icon {
-          @if $skin-name == 'FluentUI' {
-            padding-left: 8px;
-          }
-          @else {
-            padding-left: 10px;
-          }
-          padding-right: 0;
-          @if $skin-name == 'Material3' {
-            border-radius: 4px;
-          }
-        }
-
-        .e-icon-top {
-          padding-left: 0;
-        }
-
-        &.e-icon-btn {
-          padding-left: $split-btn-icon-btn-padding-bigger;
-          padding-right: $split-btn-icon-btn-padding-bigger;
-
-          .e-btn-icon {
-            padding-left: 0;
-          }
-        }
-      }
-    }
-
-    &.e-vertical {
-      .e-split-btn {
-        @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
-          padding-bottom: $split-btn-icon-btn-padding-bigger;
-          padding-right: $split-btn-icon-btn-padding-bigger;
-        }
-        @else {
-          padding-bottom: 6px;
-          padding-right: 12px;
-        }
-      }
-
-      .e-dropdown-btn {
-        @if $skin-name == 'bootstrap4' {
-          padding-bottom: $split-btn-icon-btn-padding-bigger;
-          padding-top: $split-btn-icon-btn-padding-bigger;
-        }
-        @else {
-          padding-bottom: 4px;
-          padding-top: 4px;
-        }
-        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-          z-index: 1;
-        }
-
-        .e-icon-bottom {
-          padding-top: 0;
-        }
-      }
-    }
-  }
 }