@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/pager/_material3-dark-definition.scss

@@ -1 +1,171 @@
-@import './material3-definition.scss';
+@use 'sass:math';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+
+$pager-numericitem-border-radius: 4px !default;
+$pager-border-type: solid !default;
+$pager-mobile-icon-size: 11px !default;
+$pager-icon-width: 'auto' !default;
+$pager-icon-height: 'auto' !default;
+$pager-navigationicon-padding: 11px 9px 8px !default;
+$pager-navigationicon-right: 0 !default;
+$pager-navigationicon-top: 0 !default;
+$pager-numericitem-margin-right: 0 !default;
+$pager-messagebar-padding-bottom: 0 !default;
+$pager-bigger-messagebar-padding-bottom: 8px !default;
+$pager-content-opacity: 1 !default;
+$pager-bigger-new-container-rtl-margin: 0 0 -5px !default;
+$pager-next-icon-margin-left: 0 !default;
+$pager-container-rtl-margin: 0 .3px -4px 0 !default;
+$pager-rtl-navigation-icon-padding: 8px !default;
+$pager-rtl-numeric-margin: 0 !default;
+$pager-item-hover-borders-width: 0 !default;
+$pager-tripledot-font-size: 16px !default;
+$pager-last-page-hover-border-radius: 4px !default;
+$pager-first-page-hover-border-radius: 4px !default;
+$pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 2px !default;
+$pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-bigger-current-item-border-radius: $pager-numericitem-border-radius !default;
+$pager-bigger-rtl-nexticon-marign-left: 0 !default;
+$pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-device-padding: 19px 0 !default;
+$pager-device-messabar-padding: 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-bigger-rtl-activeitem-padding: 8px !default;
+$pager-numericitem-min-width: 26px !default;
+$pager-font-size: 14px !default;
+$pager-font-line-height: 1 !default;
+$pager-numeric-font-line-height: 20px !default;
+$pager-bg-color: rgba($content-bg-color) !default;
+$pager-border-color: transparent !default;
+$pager-color: rgba($on-surface-variant) !default;
+$pager-icon-size: 16px !default;
+$pager-border-size: 1px !default;
+$pager-numericitem-padding: 13px 12px 10px !default;
+$pager-numeric-hover-bg-color: $content-bg-color-hover !default;
+$pager-numeric-txt-bg-color: $icon-color-disabled !default;
+$pager-padding: 7px 8px !default;
+$pager-numeric-font-weight: bold !default;
+$pager-messagebar-padding-top: 8px !default;
+$pager-number-hover-bg-color: $content-bg-color-hover !default;
+$pager-font-family: $font-family !default;
+$pager-font-weight: bold !default;
+$pager-messagebar-padding-right: 0 !default;
+$pager-tripledot-padding: 6px 9.5px !default;
+$pager-numeric-icon-padding: 6px 12px !default;
+$pager-pagecontainer-icon-padding: 8px !default;
+$pager-bigger-pagecontainer-icon-padding: 16px 14px 14px !default;
+$pager-hover-color: rgba($on-background) !default;
+$pager-mhover-color: rgba($primary) !default;
+$pager-pagermessage-weight: $font-weight-normal !default;
+$pager-active-bg-color: rgba($primary-light) !default;
+$pager-last-border-size: 1px !default;
+$page-content-color: rgba($on-background) !default;
+$pager-container-margin: 0 0 -4px .3px !default;
+$pager-bigger-numeric-item-margin: 0 !default;
+$pager-bigger-icon-font-size: 20px !default;
+$pager-bigger-font-size: 14px !default;
+$pager-bigger-padding: 8px !default;
+$pager-bigger-pagercontainer-margin: 0 0 -6px .8px !default;
+$pager-bigger-pagercontainer-icons-padding: 10px !default;
+$pager-bigger-pagercontainer-icons-marign-right: 0 !default;
+$pager-bigger-current-item-padding: 10px 15.5px !default;
+$pager-letter-spacing: 0 !default;
+$pager-bigger-icons-align: middle !default;
+$pager-bigger-messagebar-padding-right: 0 !default;
+$pager-bigger-messagebar-padding-top: 12px !default;
+$pager-last-content-icon: 'e235' !default;
+$pager-next-content-icon: 'e236' !default;
+$pager-prev-content-icon: 'e237' !default;
+$pager-first-content-icon: 'e238' !default;
+$pager-icon-color: rgba($on-surface-variant) !default;
+$pager-hover-bg-color: $content-bg-color-hover !default;
+$pager-dropdown-margin-top: -18px !default;
+$pager-dropdown-margin-left: 16px !default;
+$pager-dropdown-margin-right: 6px !default;
+$pager-dropdown-overflow: unset !default;
+$pager-bigger-dropdown-constant-margin: 6px !default;
+$pager-bigger-dropdown-margin: 0 10px 0 18px !default;
+$pager-dropdown-height: 32px !default;
+$pager-dropdown-width: 80px !default;
+$pager-bigger-dropdown-width: 120px !default;
+$pager-constant-margin: 0 0 5px 6px !default;
+$pager-bigger-letter-spacing: 10px 12px !default;
+$pager-tripledot-rtl-margin-top: 0 !default;
+$pager-tripledot-rtl-padding: 6px 9.5px !default;
+$pager-rtl-pagerconstant-margin-top: 0 12px 6px 0 !default;
+$pager-rtl-pagerdropdown-margin: -18px 16px 0 0 !default;
+$pager-tripledot-rtl-bigger-margin-top: 0 !default;
+$pager-bigger-rtl-numeric-margin: 0 !default;
+$pager-bigger-container-rtl-margin: 0 0 -4px !default;
+$pager-activeitem-padding: 6px 12px !default;
+$pager-bigger-activeitem-padding: 10px 15px !default;
+$pager-rtl-pagerdropdown-bigger-margin: -24px 16px 0 0 !default;
+$pager-rtl-pagerconstant-bigger-margin-top: 0 16px 7px 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-top: -4px !default;
+$pager-bigger-rtl-pagercontainer-margin-top: 5px !default;
+$pager-bigger-device-rtl-parentmsgbar-margin-top: 5px !default;
+$pager-rtl-pagermsgbar-device-margin-top: 0 !default;
+$pager-bigger-constant-margin-left: 16px !default;
+$pager-rtl-last-content-icon: 'e238' !default;
+$pager-rtl-first-content-icon: 'e235' !default;
+$pager-rtl-prev-content-icon: 'e236' !default;
+$pager-rtl-next-content-icon: 'e237' !default;
+$pager-rtl-first-last-icon-hover-border-radius: 4px !default;
+$pager-item-hover-border-width: 0 1px 0 0 !default;
+$pager-item-hover-border-color: $pager-border-color !default;
+$pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
+$pager-numeric-icon-hover-padding: $pager-numeric-icon-padding !default;
+$pager-bigger-rtl-activeitem-hover-padding: 10px 15px 10px !default;
+$pager-activeitem-hover-padding: $pager-activeitem-padding !default;
+$pager-bigger-dropdown-margin-top: -24px !default;
+$pager-rtl-nxtpage-margin: 0 !default;
+$pager-disabled-icons-opacity: 1 !default;
+$pager-current-item-font-weight: $font-weight-normal !default;
+$pager-bigger-dropdown-heigh: 40px !default;
+$pager-external-msg-padding: 6px 6px 0 !default;
+$pager-rtl-bigger-tripledot-font-size: 20px !default;
+$pager-bigger-tripledot-padding: 13px 14px 11px !default;
+$pager-container-children-height: 31px !default;
+$pager-div-chrome-margin-top: -.5px !default;
+$pager-div-margin-top: -.3px !default;
+$pager-container-height: 32px !default;
+$pager-first-disabled-border-radious: 3px 0 0 3px !default;
+$pager-last-disabled-border-radious: 0 3px 3px 0 !default;
+$pager-bigger-container-height: 38px !default;
+$pager-bigger-container-children-height: 37px !default;
+$pager-bigger-container-margin-left: -.9px !default;
+$pager-bigger-container-margin-right: -.9px !default;
+$pager-rtl-padding: $pager-padding !default;
+$pager-skin: 'material3' !default;
+$pager-container-border-radius: 4px !default;
+$pager-bigger-tripledot-font-size: 20px !default;
+$pager-active-border: 2px !default;
+$pager-active-size: solid !default;
+$pager-active-color: rgba($on-background) !default;
+$pager-numeric-icon-padding-with-margin: 7px 10px !default;
+$pager-focus-bg-color: $table-bg-color-hover !default;
+$pager-focus-tripledot-padding: 8px 9.5px !default;
+$pager-focus-tripledot-line-height: 1 !default;
+$pager-focus-active-box-shadow: 0 0 0 1px rgba($primary) inset !default;
+$pager-focus-shadow: 0 0 0 1px rgba($primary) inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 10px !default;
+$pager-rtl-adaptive-constant-top: 0 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 1px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 3px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -7px !default;
+$pager-rtl-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 13px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 15px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+
+$pager-border-radius-4: 4px !default;
+$pager-border-radius-5: 5px !default;

package/styles/pager/_material3-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 
 $pager-numericitem-border-radius: 4px !default;
 $pager-border-type: solid !default;
@@ -164,3 +166,6 @@ $pager-adaptive-constant-pagesizeall-top: 13px !default;
 $pager-bigger-adaptive-constant-pagesizeall-top: 15px !default;
 $pager-rtl-adaptive-constant-pagesizeall-top: 12px !default;
 $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+
+$pager-border-radius-4: 4px !default;
+$pager-border-radius-5: 5px !default;

package/styles/pager/_tailwind-dark-definition.scss

@@ -1 +1,157 @@
-@import './tailwind-definition.scss';
+@use 'sass:math';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+$pager-numericitem-border-radius: 0 !default;
+$pager-border-type: solid !default;
+$pager-mobile-icon-size: 11px !default;
+$pager-icon-width: 'auto' !default;
+$pager-icon-height: 'auto' !default;
+$pager-navigationicon-padding: 11px 9px 8px !default;
+$pager-navigationicon-right: 0 !default;
+$pager-navigationicon-top: -4px !default;
+$pager-numericitem-margin-right: 0 !default;
+$pager-messagebar-padding-bottom: 0 !default;
+$pager-bigger-messagebar-padding-bottom: 8px !default;
+$pager-content-opacity: 1 !default;
+$pager-bigger-new-container-rtl-margin: 0 5px -6px 0 !default;
+$pager-next-icon-margin-left: 0 !default;
+$pager-container-rtl-margin: 0 0 -4px !default;
+$pager-rtl-navigation-icon-padding: 7.5px 7px !default;
+$pager-rtl-numeric-margin: 0 !default;
+$pager-item-hover-borders-width: 0 !default;
+$pager-tripledot-font-size: 12px !default;
+$pager-last-page-hover-border-radius: 0 4px 4px 0 !default;
+$pager-first-page-hover-border-radius: 4px 0 0 4px !default;
+$pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 6px !default;
+$pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-bigger-current-item-border-radius: math.div($pager-numericitem-border-radius, .75) !default;
+$pager-bigger-rtl-nexticon-marign-left: 0 !default;
+$pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-device-padding: 19px 0 !default;
+$pager-device-messabar-padding: 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-bigger-rtl-activeitem-padding: 7px 14px !default;
+$pager-numericitem-min-width: 26px !default;
+$pager-font-size: 12px !default;
+$pager-font-line-height: 18px !default;
+$pager-numeric-font-line-height: $pager-font-line-height !default;
+$pager-bg-color: $content-bg-color !default;
+$pager-border-color: $border-light !default;
+$pager-color: $content-text-color-alt2 !default;
+$pager-icon-size: 12px !default;
+$pager-border-size: 1px !default;
+$pager-numericitem-padding: 13px 12px 10px !default;
+$pager-numeric-hover-bg-color: $content-bg-color-hover !default;
+$pager-numeric-txt-bg-color: $icon-color-disabled !default;
+$pager-padding: 8px !default;
+$pager-numeric-font-weight: bold !default;
+$pager-messagebar-padding-top: 6px !default;
+$pager-number-hover-bg-color: $content-bg-color-hover !default;
+$pager-font-family: $font-family !default;
+$pager-font-weight: bold !default;
+$pager-messagebar-padding-right: 0 !default;
+$pager-tripledot-padding: 4.5px 9.2px 7px !default;
+$pager-numeric-icon-padding: 4.5px 11px 7px !default;
+$pager-pagecontainer-icon-padding: 9.5px 7px !default;
+$pager-bigger-pagecontainer-icon-padding: 6px 10px 8px 8px !default;
+$pager-hover-color: $content-text-color-hover !default;
+$pager-mhover-color: $primary !default;
+$pager-pagermessage-weight: $font-weight-normal !default;
+$pager-active-color: $primary !default;
+$pager-active-bg-color: $content-bg-color-selected !default;
+$pager-last-border-size: 1px !default;
+$page-content-color: $content-text-color !default;
+$pager-container-margin: 0 0 -4px !default;
+$pager-bigger-numeric-item-margin: 0 !default;
+$pager-bigger-icon-font-size: 16px !default;
+$pager-bigger-font-size: $text-sm !default;
+$pager-bigger-padding: 12px !default;
+$pager-bigger-pagercontainer-margin: 0 0 -6px !default;
+$pager-bigger-pagercontainer-icons-padding: 10px 10px 11px !default;
+$pager-bigger-pagercontainer-icons-marign-right: 0 !default;
+$pager-bigger-current-item-padding: 7px 14px 6.5px !default;
+$pager-letter-spacing: 0 !default;
+$pager-bigger-icons-align: middle !default;
+$pager-bigger-messagebar-padding-right: 0 !default;
+$pager-bigger-messagebar-padding-top: 8px !default;
+$pager-last-content-icon: 'e235' !default;
+$pager-next-content-icon: 'e236' !default;
+$pager-prev-content-icon: 'e237' !default;
+$pager-first-content-icon: 'e238' !default;
+$pager-icon-color: $icon-color !default;
+$pager-hover-bg-color: $content-bg-color-hover !default;
+$pager-dropdown-margin-top: -18px !default;
+$pager-dropdown-margin-left: 10px !default;
+$pager-dropdown-margin-right: 8px !default;
+$pager-dropdown-overflow: unset !default;
+$pager-bigger-dropdown-constant-margin: 1px !default;
+$pager-bigger-dropdown-margin: -35px 10px 0 18px !default;
+$pager-dropdown-height: 30px !default;
+$pager-dropdown-width: 90px !default;
+$pager-bigger-dropdown-width: 90px !default;
+$pager-constant-margin: 6px 0 4px 8px !default;
+$pager-bigger-letter-spacing: 7px 11.8px 6.5px !default;
+$pager-tripledot-rtl-margin-top: 0 !default;
+$pager-tripledot-rtl-padding: 4.5px 8.7px 5px !default;
+$pager-rtl-pagerconstant-margin-top: 6px 8px 3px !default;
+$pager-rtl-pagerdropdown-margin: -18px 16px 0 0 !default;
+$pager-tripledot-rtl-bigger-margin-top: 0 !default;
+$pager-bigger-rtl-numeric-margin: 0 !default;
+$pager-bigger-container-rtl-margin: 0 0 -4px !default;
+$pager-activeitem-padding: 4.5px 11px 7px !default;
+$pager-bigger-activeitem-padding: 7px 14px !default;
+$pager-rtl-pagerdropdown-bigger-margin: -18.5px 16px 0 0 !default;
+$pager-rtl-pagerconstant-bigger-margin-top: 6px 16px 2px 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-top: 0 !default;
+$pager-bigger-rtl-pagercontainer-margin-top: 5px !default;
+$pager-bigger-device-rtl-parentmsgbar-margin-top: 5px !default;
+$pager-rtl-pagermsgbar-device-margin-top: 0 !default;
+$pager-bigger-constant-margin-left: 16px !default;
+$pager-rtl-last-content-icon: 'e238' !default;
+$pager-rtl-first-content-icon: 'e235' !default;
+$pager-rtl-prev-content-icon: 'e236' !default;
+$pager-rtl-next-content-icon: 'e237' !default;
+$pager-rtl-first-last-icon-hover-border-radius: 0 4px 4px 0 !default;
+$pager-item-hover-border-width: 0 1px 0 0 !default;
+$pager-item-hover-border-color: $pager-border-color !default;
+$pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
+$pager-numeric-icon-hover-padding: $pager-numeric-icon-padding !default;
+$pager-bigger-rtl-activeitem-hover-padding: $pager-bigger-rtl-activeitem-padding !default;
+$pager-activeitem-hover-padding: $pager-activeitem-padding !default;
+$pager-bigger-dropdown-margin-top: -18.5px !default;
+$pager-rtl-nxtpage-margin: 0 !default;
+$pager-disabled-icons-opacity: 1 !default;
+$pager-current-item-font-weight: $font-weight-medium !default;
+$pager-bigger-dropdown-heigh: 38px !default;
+$pager-external-msg-padding: 6px !default;
+$pager-rtl-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
+$pager-current-item-font-weight: normal !default;
+$pager-skin: 'tailwind' !default;
+$pager-container-border-radius: 4px !default;
+$pager-bigger-tripledot-font-size: 14px !default;
+$pager-focus-bg-color: $transparent !default;
+$pager-focus-tripledot-padding: 4.5px 9.2px 7px !default;
+$pager-focus-tripledot-line-height: 18px !default;
+$pager-focus-active-box-shadow: none !default;
+$pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-dropdown-margin: 0 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 90px !default;
+$pager-bigger-adaptive-constant-top: 2px !default;
+$pager-rtl-adaptive-constant-top: -1px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-rtl-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 9px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 12px !default;
+
+$pager-border-radius-4: 4px !default;
+$pager-border-radius-5: 5px !default;

package/styles/pager/_tailwind-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
 
 $pager-numericitem-border-radius: 0 !default;
 $pager-border-type: solid !default;
@@ -150,3 +152,6 @@ $pager-adaptive-constant-pagesizeall-top: 10px !default;
 $pager-bigger-adaptive-constant-pagesizeall-top: 9px !default;
 $pager-rtl-adaptive-constant-pagesizeall-top: 10px !default;
 $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 12px !default;
+
+$pager-border-radius-4: 4px !default;
+$pager-border-radius-5: 5px !default;

package/styles/pager/_tailwind3-definition.scss

@@ -1,6 +1,8 @@
 @use 'sass:math';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 
-$pager-numericitem-border-radius: 0 !default;
+$pager-numericitem-border-radius: $radius-0 !default;
 $pager-border-type: solid !default;
 $pager-mobile-icon-size: 11px !default;
 $pager-icon-width: 'auto' !default;
@@ -19,8 +21,8 @@ $pager-rtl-navigation-icon-padding: 8.85px 8.6px 7px 8.6px !default;
 $pager-rtl-numeric-margin: 0 !default;
 $pager-item-hover-borders-width: 0 !default;
 $pager-tripledot-font-size: 14px !default;
-$pager-last-page-hover-border-radius:  0 3px 3px 0 !default;
-$pager-first-page-hover-border-radius: 3px 0 0 3px !default;
+$pager-last-page-hover-border-radius: $radius-0 $radius-3 $radius-3 $radius-0 !default;
+$pager-first-page-hover-border-radius: $radius-3 $radius-0 $radius-0 $radius-3 !default;
 $pager-rtl-parentmsgbar-margin-left: 6px !default;
 $pager-rtl-parentmsgbar-padding-top: 5px !default;
 $pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
@@ -110,7 +112,7 @@ $pager-rtl-last-content-icon: 'e238' !default;
 $pager-rtl-first-content-icon: 'e235' !default;
 $pager-rtl-prev-content-icon: 'e236' !default;
 $pager-rtl-next-content-icon: 'e237' !default;
-$pager-rtl-first-last-icon-hover-border-radius: 0 4px 4px 0 !default;
+$pager-rtl-first-last-icon-hover-border-radius: $radius-0 $radius-4 $radius-4 $radius-0 !default;
 $pager-item-hover-border-width: 0 1px 0 0 !default;
 $pager-item-hover-border-color: $pager-border-color !default;
 $pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
@@ -129,15 +131,15 @@ $pager-container-children-height: 31px !default;
 $pager-div-chrome-margin-top: -.5px !default;
 $pager-div-margin-top: -.3px !default;
 $pager-container-height: 32px !default;
-$pager-first-disabled-border-radious: 3px 0 0 3px !default;
-$pager-last-disabled-border-radious: 0 3px 3px 0 !default;
+$pager-first-disabled-border-radious: $radius-3 $radius-0 $radius-0 $radius-3 !default;
+$pager-last-disabled-border-radious: $radius-0 $radius-3 $radius-3 $radius-0 !default;
 $pager-bigger-container-height: 38px !default;
 $pager-bigger-container-children-height: 37px !default;
 $pager-bigger-container-margin-left: -.9px !default;
 $pager-bigger-container-margin-right: -.9px !default;
 $pager-rtl-padding: $pager-padding !default;
 $pager-skin: $skin-name !default;
-$pager-container-border-radius: 4px !default;
+$pager-container-border-radius: $radius-4 !default;
 $pager-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
 $pager-active-border: 2px !default;
 $pager-active-size: solid !default;
@@ -164,3 +166,6 @@ $pager-adaptive-constant-pagesizeall-top: 11px !default;
 $pager-bigger-adaptive-constant-pagesizeall-top: 10px !default;
 $pager-rtl-adaptive-constant-pagesizeall-top: 14px !default;
 $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;
+
+$pager-border-radius-4: $radius-4 !default;
+$pager-border-radius-5: $radius-5 !default;

package/styles/pager/_theme-variables.scss

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

package/styles/pager/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin color-opacity-styles($color, $opacity) {
   color: $color;
   opacity: $opacity;
@@ -48,7 +50,7 @@
     .e-pager-default:hover {
       @include background-color-opacity-styles($pager-hover-bg-color, $pager-hover-color, $pager-content-opacity);
       @if $pager-skin == 'material3' {
-        border-radius: 4px;
+        border-radius: $pager-border-radius-4;
       }
     }
 
@@ -138,7 +140,7 @@
         border-right-color: $primary-light;
       }
       @if $pager-skin == 'material3' {
-        border-radius: 4px;
+        border-radius: $pager-border-radius-4;
       }
       @include background-color-opacity-styles($pager-active-bg-color, $pager-active-color, 1);
     }

package/styles/pager/bds.scss

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

package/styles/pager/bootstrap-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/bootstrap.scss

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

package/styles/pager/bootstrap4.scss

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

package/styles/pager/bootstrap5-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'icons/bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/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 */
 /* !componenticons */
 .e-pager .e-icon-last::before,
 .e-grid-menu .e-icon-last::before {

package/styles/pager/bootstrap5.3.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'icons/bootstrap5.3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'icons/bootstrap5.3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/bootstrap5.scss

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

package/styles/pager/fabric-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'fabric-dark-definition' as *;
+@use 'icons/fabric-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/pager/fabric.scss

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

package/styles/pager/fluent-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'fluent-dark-definition' as *;
+@use 'icons/fluent-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;