@syncfusion/ej2-splitbuttons 31.2.2 → 32.1.19

package/styles/split-button/_tailwind-dark-definition.scss

@@ -1 +1,73 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use '../drop-down-button/tailwind-dark-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+@forward '../drop-down-button/tailwind-dark-definition';
+
+//layout variables
+$split-btn-zindex: 2 !default;
+$split-btn-border-radius: 4px !default;
+$split-btn-focus-outline-offset: 0 !default;
+$split-btn-vertical-secondary-icon-line-height: .334em !default;
+$split-btn-seperator-border: 1px solid !default;
+$split-btn-sec-btn-margin-left: -1px !default;
+$split-btn-icon-btn-padding: 8px !default;
+$split-btn-icon-btn-padding-bigger: 12px !default;
+$split-btn-focus-border-color: $secondary-border-color !default;
+$split-btn-focus-vertical-border-color: $secondary-border-color !default;
+$split-btn-seperator-border-color: $secondary-border-color !default;
+$split-btn-seperator-default-border-color: $secondary-border-color !default;
+$split-btn-seperator-vertical-border-color: $secondary-border-color !default;
+$split-btn-hover-border-color: $secondary-border-color !default;
+$split-btn-hover-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-border-color: $secondary-bg-color-pressed !default;
+$split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
+$split-btn-disabled-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-box-shadow: $shadow-focus-ring2 !default;
+$split-btn-disabled-left-border-color: $secondary-border-color !default;
+$split-btn-hover-left-border-color: $secondary-border-color !default;
+$split-btn-focus-left-border-color: $secondary-border-color !default;
+$split-btn-active-left-border-color: $secondary-border-color !default;
+$split-btn-bigger-padding-left: 16px !default;
+$split-btn-bigger-padding-right: 16px !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: 0 !default;
+$drop-down-bigger-rtl-padding-left: 12px !default;
+$drop-down-bigger-rtl-padding-right: 12px !default;
+$drop-down-bgr-rtl-icon-padding-left: 10px !default;
+
+$split-rtl-btn-padding-left: 12px !default;
+$split-rtl-btn-padding-right: 12px !default;
+
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$split-btn-vertical-padding-right: 10px !default;
+$split-btn-vertical-icon-top-padding: 4px !default;
+$drop-down-btn-vertical-padding-bottom: 4px !default;
+$drop-down-btn-vertical-padding-top: 4px !default;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-btn-wrapper-btn-padding: 3.75px 11px !default;
+$split-full-width: 100% !default;

package/styles/split-button/_tailwind-definition.scss

@@ -1,3 +1,8 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use '../drop-down-button/tailwind-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+@forward '../drop-down-button/tailwind-definition';
+
 //layout variables
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 4px !default;
@@ -22,3 +27,47 @@ $split-btn-disabled-left-border-color: $secondary-border-color !default;
 $split-btn-hover-left-border-color: $secondary-border-color !default;
 $split-btn-focus-left-border-color: $secondary-border-color !default;
 $split-btn-active-left-border-color: $secondary-border-color !default;
+$split-btn-bigger-padding-left: 16px !default;
+$split-btn-bigger-padding-right: 16px !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: 0 !default;
+$drop-down-bigger-rtl-padding-left: 12px !default;
+$drop-down-bigger-rtl-padding-right: 12px !default;
+$drop-down-bgr-rtl-icon-padding-left: 10px !default;
+
+$split-rtl-btn-padding-left: 12px !default;
+$split-rtl-btn-padding-right: 12px !default;
+
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$split-btn-vertical-padding-right: 10px !default;
+$split-btn-vertical-icon-top-padding: 4px !default;
+$drop-down-btn-vertical-padding-bottom: 4px !default;
+$drop-down-btn-vertical-padding-top: 4px !default;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-btn-wrapper-btn-padding: 3.75px 11px !default;
+$split-full-width: 100% !default;

package/styles/split-button/_tailwind3-definition.scss

@@ -1,5 +1,9 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use '../drop-down-button/tailwind3-definition' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+@forward '../drop-down-button/tailwind3-definition';
 $split-btn-zindex: 2 !default;
-$split-btn-border-radius: 4px !default;
+$split-btn-border-radius: $radius-4 !default;
 $split-btn-focus-outline-offset: 0 !default;
 $split-btn-vertical-secondary-icon-line-height: .334em !default;
 $split-btn-seperator-border: 1px solid !default;
@@ -21,3 +25,46 @@ $split-btn-disabled-left-border-color: $secondary-border-color !default;
 $split-btn-hover-left-border-color: $secondary-border-color !default;
 $split-btn-focus-left-border-color: $secondary-border-color !default;
 $split-btn-active-left-border-color: $secondary-border-color !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+$split-btn-bigger-padding-left: 12px !default;
+$split-btn-bigger-padding-right: 6px !default;
+$split-btn-bgr-vertical-padding-bottom: 6px !default;
+$split-btn-bgr-vertical-padding-right: 12px !default;
+$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
+$drop-down-btn-bgr-vertical-padding-top: 4px !default;
+$drop-down-bigger-btn-icon-margin-left: 0 !default;
+$drop-down-bigger-btn-icon-padding-right: 10px !default;
+$drop-down-bigger-icon-top-padding-bottom: 6px !default;
+$drop-down-zero-padding-margin: 0 !default;
+$drop-down-zero-border-radius: $radius-0 !default;
+$drop-down-bigger-rtl-padding-left: 6px !default;
+$drop-down-bigger-rtl-padding-right: 12px !default;
+$drop-down-bgr-rtl-icon-padding-left: 10px !default;
+$drop-dbtn-bigger-padding-left: 4px !default;
+$drop-dbtn-bigger-padding-right: 4px !default;
+
+$split-rtl-btn-padding-left: 4px !default;
+$split-rtl-btn-padding-right: 10px !default;
+
+$split-btn-icon-padding-right: 8px !default;
+$split-rtl-btn-icon-padding-left: 8px !default;
+
+$split-btn-padding-left: 10px !default;
+$split-btn-padding-right: 10px !default;
+$split-btn-top-icon-padding-bottom: 10px !default;
+$split-btn-top-icon-padding-top: 10px !default;
+$split-btn-icon-top-padding-bottom: 4px !default;
+$drop-down-btn-padding-left: 4px !default;
+$drop-down-btn-padding-right: 4px !default;
+$split-btn-line-height: 1 !default;
+$split-btn-vertical-padding-bottom: 4px !default;
+$split-btn-vertical-padding-right: 10px !default;
+$split-btn-vertical-icon-top-padding: 4px !default;
+$drop-down-btn-vertical-padding-bottom: 4px !default;
+$drop-down-btn-vertical-padding-top: 4px !default;
+$split-btn-top-icon-padding-bottom: 12px !default;
+$split-btn-top-icon-padding-top: 12px !default;
+$split-auto-width: auto !default;
+$split-btn-wrapper-btn-padding: 3.75px 11px !default;
+$split-full-width: 100% !default;

package/styles/split-button/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/split-button/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('split-button-theme') {
   .e-split-btn-wrapper {
     .e-split-btn {

package/styles/split-button/bds.css

@@ -211,8 +211,6 @@
   border-top-left-radius: 0;
   border-top-right-radius: 8px;
   margin-left: -1px;
-  padding-left: 12px;
-  padding-right: 12px;
   padding-left: 4px;
   padding-right: 10px;
 }
@@ -252,8 +250,6 @@
   line-height: 1;
   padding-bottom: 10px;
   padding-right: 10px;
-  padding-bottom: 4px;
-  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
   padding-bottom: 4px;
@@ -380,14 +376,14 @@
 
 .e-bigger .e-split-btn-wrapper .e-split-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: 12px;
+  padding-right: 6px;
   line-height: 1.781em;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
@@ -418,7 +414,7 @@
 }
 .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
 .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
-  padding-left: 12px;
+  padding-left: 6px;
   padding-right: 12px;
 }
 .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon,

package/styles/split-button/bds.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-popups/styles/popup/bds-definition.scss';
-@import './../drop-down-button/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-popups/styles/popup/bds-definition' as *;
+@use './../drop-down-button/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap-dark.css

@@ -273,8 +273,8 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {

package/styles/split-button/bootstrap-dark.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
-@import './../drop-down-button/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
+@use './../drop-down-button/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap.css

@@ -273,8 +273,8 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {

package/styles/split-button/bootstrap.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-definition.scss';
-@import './../drop-down-button/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-definition' as *;
+@use './../drop-down-button/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap4.css

@@ -91,8 +91,6 @@
   margin-left: -1px;
   padding-left: 8px;
   padding-right: 8px;
-  padding-left: 4px;
-  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
   margin-right: 0;
@@ -130,8 +128,6 @@
   line-height: 1;
   padding-bottom: 8px;
   padding-right: 8px;
-  padding-bottom: 4px;
-  padding-right: 10px;
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
   padding-bottom: 4px;
@@ -144,8 +140,6 @@
   margin-top: -1px;
   padding-bottom: 8px;
   padding-top: 8px;
-  padding-bottom: 4px;
-  padding-top: 4px;
 }
 .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
   padding-top: 0;
@@ -266,8 +260,8 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
@@ -294,8 +288,6 @@
 .e-bigger.e-split-btn-wrapper .e-dropdown-btn {
   padding-left: 10px;
   padding-right: 10px;
-  padding-left: 4px;
-  padding-right: 4px;
 }
 .e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
 .e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {

package/styles/split-button/bootstrap4.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
-@import './../drop-down-button/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap4-definition' as *;
+@use './../drop-down-button/bootstrap4-definition' as *;
+@use 'bootstrap4-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap5-dark.css

@@ -261,8 +261,8 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {

package/styles/split-button/bootstrap5-dark.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
-@import './../drop-down-button/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap5-dark-definition' as *;
+@use './../drop-down-button/bootstrap5-dark-definition' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap5.3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* 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 */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable-line no-empty-source */
 .e-split-btn-wrapper {
   display: -webkit-inline-box;
@@ -13,9 +93,10 @@
   width: min-content;
 }
 .e-split-btn-wrapper .e-split-btn {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
   text-transform: none;
+  border: 0;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -54,8 +135,8 @@
   padding-right: 0;
 }
 .e-split-btn-wrapper .e-dropdown-btn {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
   margin-left: -1px;
   padding-left: 4px;
   padding-right: 4px;
@@ -90,10 +171,10 @@
           box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0.25);
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0.25);
   margin-left: -1px;
   padding-left: 4px;
   padding-right: 10px;
@@ -114,10 +195,10 @@
   padding-left: 0;
 }
 .e-split-btn-wrapper.e-rtl .e-dropdown-btn {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.25);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0.25);
+  border-top-right-radius: calc(var(--e-radius) * 0);
   margin-left: 0;
 }
 .e-split-btn-wrapper.e-vertical {
@@ -129,8 +210,8 @@
   width: 100%;
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn {
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0.25);
   line-height: 1;
   padding-bottom: 4px;
   padding-right: 10px;
@@ -139,8 +220,8 @@
   padding-bottom: 4px;
 }
 .e-split-btn-wrapper.e-vertical .e-dropdown-btn {
-  border-bottom-left-radius: 4px;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.25);
+  border-top-right-radius: calc(var(--e-radius) * 0);
   line-height: 0.334em;
   margin-left: 0;
   margin-top: -1px;
@@ -151,13 +232,13 @@
   padding-top: 0;
 }
 .e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 4px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0.25);
   margin-left: 0;
 }
 .e-split-btn-wrapper.e-vertical.e-rtl .e-dropdown-btn {
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.25);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 
 .e-split-btn-wrapper .e-split-btn {
@@ -265,8 +346,8 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {

package/styles/split-button/bootstrap5.3.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-buttons/styles/button/bootstrap5.3-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5.3-definition.scss';
-@import './../drop-down-button/bootstrap5.3-definition.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap5.3-definition' as *;
+@use './../drop-down-button/bootstrap5.3-definition' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/bootstrap5.css

@@ -261,8 +261,8 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {

package/styles/split-button/bootstrap5.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
-@import './../drop-down-button/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap5-definition' as *;
+@use './../drop-down-button/bootstrap5-definition' as *;
+@use 'bootstrap5-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/split-button/fabric-dark.css

@@ -273,8 +273,8 @@
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
-  padding-bottom: 12px;
-  padding-top: 12px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 }
 .e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
 .e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {