@syncfusion/ej2-calendars 33.2.15 → 34.2.2

package/styles/tailwind3.scss

@@ -1,24 +1,20 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
 @use 'calendar/tailwind3-definition' as *;
 @use 'calendar/icons/tailwind3' as *;
-@use 'calendar/all.tailwind3' as *;
-@use 'calendar/bigger.tailwind3' as *;
-@use 'ej2-inputs/styles/input/tailwind3-definition' as *;
-@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
+@use 'calendar/all' as *;
+@use 'calendar/bigger' as *;
 @use 'timepicker/tailwind3-definition' as *;
 @use 'timepicker/icons/tailwind3' as *;
-@use 'timepicker/all.tailwind3' as *;
-@use 'timepicker/bigger.tailwind3' as *;
+@use 'timepicker/all' as *;
+@use 'timepicker/bigger' as *;
 @use 'datepicker/tailwind3-definition' as *;
 @use 'datepicker/icons/tailwind3' as *;
-@use 'datepicker/all.tailwind3' as *;
-@use 'datepicker/bigger.tailwind3' as *;
+@use 'datepicker/all' as *;
+@use 'datepicker/bigger' as *;
 @use 'daterangepicker/tailwind3-definition' as *;
 @use 'daterangepicker/icons/tailwind3' as *;
-@use 'daterangepicker/all.tailwind3' as *;
-@use 'daterangepicker/bigger.tailwind3' as *;
+@use 'daterangepicker/all' as *;
+@use 'daterangepicker/bigger' as *;
 @use 'datetimepicker/tailwind3-definition' as *;
 @use 'datetimepicker/icons/tailwind3' as *;
-@use 'datetimepicker/all.tailwind3' as *;
-@use 'datetimepicker/bigger.tailwind3' as *;
+@use 'datetimepicker/all' as *;
+@use 'datetimepicker/bigger' as *;

package/styles/timepicker/_all.scss

@@ -1,2 +1,2 @@
-@use 'layout' as *;
-@use 'theme' as *;
+@forward 'layout';
+@forward 'theme';

package/styles/timepicker/_bds-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bds' as *;
-@forward 'ej2-base/styles/definition/bds';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: $skin-name !default;

package/styles/timepicker/_bigger.scss

@@ -1,11 +1,11 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('timepicker-bigger') {
 
   .e-bigger .e-time-wrapper,
-  #{if(&, '&', '*')}.e-bigger.e-time-wrapper,
-  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-time-wrapper,
-  #{if(&, '&', '*')}.e-control-wrapper.e-bigger.e-time-wrapper {
-    #{if(&, '&', '*')} .e-time-icon.e-icons {
+  *.e-bigger.e-time-wrapper,
+  *.e-bigger .e-control-wrapper .e-time-wrapper,
+  *.e-control-wrapper.e-bigger.e-time-wrapper {
+    & .e-time-icon.e-icons {
       font-size: $timepicker-icon-bigger-font-size;
       @if $timepicker-skin-name == 'material' or $timepicker-skin-name == 'material-dark' or $timepicker-skin-name == 'Material3' {
         min-height: $timepicker-bigger-input-min-height;
@@ -19,11 +19,11 @@
   }
   
   .e-bigger #{&}.e-timepicker.e-popup,
-  #{if(&, '&', '*')}.e-bigger#{&}.e-timepicker.e-popup {
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
+  *.e-bigger#{&}.e-timepicker.e-popup {
+    & .e-list-parent.e-ul {
       padding: $timepicker-list-parent-bigger-padding;
 
-      #{if(&, '&', '*')} .e-list-item {
+      & .e-list-item {
         font-size: $timepicker-list-bigger-font-size;
         line-height: $timepicker-list-bigger-line-height;
         text-indent: $timepicker-list-bigger-text-indent;
@@ -38,9 +38,9 @@
   }
 
   .e-small.e-bigger #{&}.e-timepicker.e-popup,
-  #{if(&, '&', '*')}.e-small.e-bigger#{&}.e-timepicker.e-popup {
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
-      #{if(&, '&', '*')} .e-list-item {
+  *.e-small.e-bigger#{&}.e-timepicker.e-popup {
+    & .e-list-parent.e-ul {
+      & .e-list-item {
         font-size: $timepicker-list-bigger-small-font-size;
         line-height: $timepicker-list-bigger-small-line-height;
         text-indent: $timepicker-list-bigger-small-text-indent;
@@ -49,10 +49,10 @@
   }
 
   .e-small.e-bigger .e-time-wrapper,
-  #{if(&, '&', '*')}.e-small.e-bigger.e-time-wrapper,
-  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper.e-time-wrapper,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger.e-time-wrapper {
-    #{if(&, '&', '*')} .e-time-icon.e-icons {
+  *.e-small.e-bigger.e-time-wrapper,
+  *.e-small.e-bigger .e-control-wrapper.e-time-wrapper,
+  *.e-control-wrapper.e-small.e-bigger.e-time-wrapper {
+    & .e-time-icon.e-icons {
       font-size: $timepicker-icon-bigger-small-font-size;
       @if $timepicker-skin-name == 'Material3' {
         min-height: $timepicker-bigger-small-input-min-height;
@@ -64,9 +64,9 @@
   }
 
   .e-bigger.e-small #{&}.e-timepicker.e-popup,
-  #{if(&, '&', '*')}.e-bigger.e-small#{&}.e-timepicker.e-popup {
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
-      #{if(&, '&', '*')} .e-list-item {
+  *.e-bigger.e-small#{&}.e-timepicker.e-popup {
+    & .e-list-parent.e-ul {
+      & .e-list-item {
         color: $timepicker-list-small-font-color;
       }
     }

package/styles/timepicker/_bootstrap-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $timepicker-skin-name: 'bootstrap-dark' !default;

package/styles/timepicker/_bootstrap-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@forward 'ej2-base/styles/definition/bootstrap';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $timepicker-skin-name: 'bootstrap' !default;
 $timepicker-default-text-indent: 20px !default;
 $timepicker-list-bigger-line-height: 40px !default;

package/styles/timepicker/_bootstrap4-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@forward 'ej2-base/styles/definition/bootstrap4';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $timepicker-skin-name: 'bootstrap4' !default;
 $timepicker-default-text-indent: 20px !default;

package/styles/timepicker/_bootstrap5-dark-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'bootstrap5' !default;

package/styles/timepicker/_bootstrap5-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'bootstrap5' !default;

package/styles/timepicker/_bootstrap5.3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'bootstrap5' !default;

package/styles/timepicker/_fabric-dark-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $timepicker-skin-name: 'fabric-dark' !default;

package/styles/timepicker/_fabric-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fabric' as *;
-@forward 'ej2-base/styles/definition/fabric';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $timepicker-skin-name: 'fabric' !default;
 $timepicker-default-text-indent: 10px !default;
 $timepicker-list-bigger-line-height: 48px !default;

package/styles/timepicker/_fluent-dark-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/fluent-dark' as *;
-@forward 'ej2-base/styles/definition/fluent-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'FluentUI' !default;

package/styles/timepicker/_fluent-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/fluent' as *;
-@forward 'ej2-base/styles/definition/fluent';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'FluentUI' !default;

package/styles/timepicker/_fluent2-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fluent2' as *;
-@forward 'ej2-base/styles/definition/fluent2';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: $skin-name !default;

package/styles/timepicker/_fusionnew-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fusionnew' as *;
-@forward 'ej2-base/styles/definition/fusionnew';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'bootstrap5' !default;

package/styles/timepicker/_highcontrast-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $timepicker-skin-name: 'highcontrast' !default;
 $timepicker-default-text-indent: 10px !default;
 $timepicker-list-bigger-line-height: 48px !default;

package/styles/timepicker/_highcontrast-light-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@forward 'ej2-base/styles/definition/highcontrast-light';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $timepicker-skin-name: 'highcontrast-light' !default;

package/styles/timepicker/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('timepicker-layout') {
   //   timepicker layout
   .e-input-group.e-control-wrapper.e-time-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
@@ -7,11 +7,11 @@
   }
 
   .e-time-wrapper,
-  #{if(&, '&', '*')}.e-control-wrapper.e-time-wrapper {
+  *.e-control-wrapper.e-time-wrapper {
     /* stylelint-disable property-no-vendor-prefix */
     -webkit-tap-highlight-color: transparent;
 
-    #{if(&, '&', '*')} .e-time-icon.e-icons {
+    & .e-time-icon.e-icons {
       font-size: $timepicker-icon-normal-font-size;
       @if $timepicker-skin-name == 'material' or $timepicker-skin-name == 'material-dark' or $timepicker-skin-name == 'Material3' {
         min-height: $timepicker-normal-input-min-height;
@@ -23,11 +23,11 @@
       }
     }
 
-    #{if(&, '&', '*')} .e-time-icon.e-icons.e-disabled {
+    & .e-time-icon.e-icons.e-disabled {
       pointer-events: none;
     }
 
-    #{if(&, '&', '*')} span {
+    & span {
       cursor: pointer;
     }
   }
@@ -60,15 +60,15 @@
     border-width: $timepicker-border;
     overflow: auto;
 
-    #{if(&, '&', '*')} .e-content {
+    & .e-content {
       position: relative;
     }
 
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
+    & .e-list-parent.e-ul {
       margin: $timepicker-list-parent-margin;
       padding: $timepicker-list-parent-padding;
 
-      #{if(&, '&', '*')} .e-list-item {
+      & .e-list-item {
         cursor: default;
         font-size: $timepicker-list-normal-font-size;
         overflow: hidden;
@@ -79,23 +79,23 @@
         width: $timepicker-full-width;
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-hover {
+      & .e-list-item.e-hover {
         cursor: pointer;
       }
     }
   }
 
   #{&}.e-timepicker.e-popup {
-    #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
+    & .e-list-parent.e-ul .e-list-item {
       line-height: $timepicker-list-normal-line-height;
       text-indent: $timepicker-list-normal-text-indent;
     }
   }
 
   .e-small #{&}.e-timepicker.e-popup,
-  #{if(&, '&', '*')}.e-small#{&}.e-timepicker.e-popup {
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
-      #{if(&, '&', '*')} .e-list-item {
+  *.e-small#{&}.e-timepicker.e-popup {
+    & .e-list-parent.e-ul {
+      & .e-list-item {
         font-size: $timepicker-list-small-font-size;
         line-height: $timepicker-list-small-line-height;
         text-indent: $timepicker-list-small-text-indent;
@@ -104,10 +104,10 @@
   }
 
   .e-small .e-time-wrapper,
-  #{if(&, '&', '*')}.e-small.e-time-wrapper,
-  #{if(&, '&', '*')}.e-small .e-control-wrapper.e-time-wrapper,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-time-wrapper {
-    #{if(&, '&', '*')} .e-time-icon.e-icons {
+  *.e-small.e-time-wrapper,
+  *.e-small .e-control-wrapper.e-time-wrapper,
+  *.e-control-wrapper.e-small.e-time-wrapper {
+    & .e-time-icon.e-icons {
       font-size: $timepicker-icon-small-font-size;
       @if $timepicker-skin-name == 'Material3' {
         min-height: $timepicker-small-input-min-height;
@@ -158,7 +158,7 @@
 
 .e-timepicker-mob-popup-wrap .e-popup-expand,
 .e-datetimepicker.e-popup-expand {
-    #{if(&, '&', '*')} .e-model-header {
+    & .e-model-header {
       height: $modal-header-height;
       padding: $modal-header-padding;
       display: $modal-header-display-style;
@@ -166,27 +166,27 @@
       font-size: $modal-header-portrait-font-size;
       border-bottom: $modal-header-border-bottom;
 
-      #{if(&, '&', '*')} .e-popup-close {
+      & .e-popup-close {
         float: $modal-close-icon-float;
         padding: $modal-portrait-content-padding;
       }
 
-      #{if(&, '&', '*')} .e-model-title {
+      & .e-model-title {
         padding: $modal-portrait-content-padding;
         text-transform: $modal-header-title-transform;
         font-weight: $timepicker-model-title-font-weight;
       }
 
-      #{if(&, '&', '*')} .e-btn.e-popup-close {
+      & .e-btn.e-popup-close {
         font-size: $modal-header-portrait-font-size;
       }
     }
 
-    #{if(&, '&', '*')} .e-content {
+    & .e-content {
       height: $modal-content-height;
       overflow: $modal-content-overflow;
 
-      #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
+      & .e-list-parent.e-ul .e-list-item {
         padding: $modal-list-item-padding;
         line-height: $modal-list-line-height;
 
@@ -204,27 +204,27 @@
 @media screen and (orientation: landscape) {
   .e-timepicker-mob-popup-wrap .e-popup-expand,
   .e-datetimepicker.e-popup-expand {  
-      #{if(&, '&', '*')} .e-model-header {
+      & .e-model-header {
         height: $modal-header-landscape-height;
         font-size: $modal-header-landscape-font-size;
   
-        #{if(&, '&', '*')} .e-popup-close {
+        & .e-popup-close {
           padding: $modal-landscape-padding;
         }
   
-        #{if(&, '&', '*')} .e-model-title {
+        & .e-model-title {
           padding: $modal-landscape-padding;
         }
 
-        #{if(&, '&', '*')} .e-btn.e-popup-close {
+        & .e-btn.e-popup-close {
           font-size: $modal-header-landscape-font-size;
         }
       }
   
-      #{if(&, '&', '*')} .e-content {
+      & .e-content {
         height: $modal-content-landscape-height;
   
-        #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
+        & .e-list-parent.e-ul .e-list-item {
           padding: $modal-list-item-padding;
           line-height: $modal-landscape-list-line-height;
         }

package/styles/timepicker/_material-dark-definition.scss

@@ -1,7 +1,4 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
-@use 'ej2-inputs/styles/input/material-dark-definition' as *;
-@forward 'ej2-base/styles/definition/material-dark';
-@forward 'ej2-inputs/styles/input/material-dark-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $timepicker-skin-name: 'material-dark' !default;
@@ -98,3 +95,4 @@ $timepicker-full-height: 100% !default;
 $timepicker-content-placeholder-min-height: 33px !default;
 $timepicker-full-width: 100% !default;
 $timepicker-border: 1px !default;
+$zero-value: 0 !default;

package/styles/timepicker/_material-definition.scss

@@ -1,7 +1,5 @@
-@use 'ej2-base/styles/definition/material' as *;
-@use 'ej2-inputs/styles/input/material-definition' as *;
-@forward 'ej2-base/styles/definition/material';
-@forward 'ej2-inputs/styles/input/material-definition';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $timepicker-skin-name: 'material' !default;
 $timepicker-default-text-indent: 16px !default;
 $timepicker-list-bigger-line-height: 48px !default;
@@ -94,3 +92,4 @@ $timepicker-full-height: 100% !default;
 $timepicker-content-placeholder-min-height: 33px !default;
 $timepicker-full-width: 100% !default;
 $timepicker-border: 1px !default;
+$zero-value: 0 !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $timepicker-skin-name: 'Material3' !default;
 $timepicker-default-text-indent: 16px !default;
 $timepicker-list-bigger-line-height: 40px !default;
@@ -94,3 +94,4 @@ $timepicker-full-height: 100% !default;
 $timepicker-content-placeholder-min-height: 33px !default;
 $timepicker-full-width: 100% !default;
 $timepicker-border: 1px !default;
+$zero-value: 0 !default;

package/styles/timepicker/_material3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $timepicker-skin-name: 'Material3' !default;
 $timepicker-default-text-indent: 16px !default;
 $timepicker-list-bigger-line-height: 40px !default;
@@ -94,3 +94,4 @@ $timepicker-full-height: 100% !default;
 $timepicker-content-placeholder-min-height: 33px !default;
 $timepicker-full-width: 100% !default;
 $timepicker-border: 1px !default;
+$zero-value: 0 !default;

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

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'tailwind' !default;

package/styles/timepicker/_tailwind-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'tailwind' !default;

package/styles/timepicker/_tailwind3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 // size variables
 $timepicker-skin-name: 'tailwind3' !default;

package/styles/timepicker/_theme.scss

@@ -1,7 +1,7 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('timepicker-theme') {
   .e-time-wrapper {
-    #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
+    & .e-input-group-icon.e-icons.e-active {
       @if $timepicker-skin-name == 'bootstrap4' or $timepicker-skin-name == 'bootstrap5' or $timepicker-skin-name == 'bootstrap5.3' {
         background: $timepicker-icon-active-bg-color;
         border-color: $timepicker-active-border-color;
@@ -9,7 +9,7 @@
       color: $timepicker-list-active-icon-color;
     }
 
-    #{if(&, '&', '*')}.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
+    &.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
       color: $timepicker-list-popup-icon-active-color;
       @if $timepicker-skin-name == 'Material3' {
         border: $timepicker-icon-active-border;
@@ -30,7 +30,7 @@
     border-radius: $timepicker-popup-border-radius;
     box-shadow: $timepicker-popup-shadow;
 
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
+    & .e-list-parent.e-ul {
       @if $timepicker-skin-name != 'Material3' {
         background-color: $timepicker-list-bg-color;
       }
@@ -38,26 +38,26 @@
         background: $timepicker-list-bg-color;
       }
 
-      #{if(&, '&', '*')} li.e-list-item {
+      & li.e-list-item {
         border: $timepicker-list-default-border-style;
         color: $timepicker-list-default-font-color;
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-disabled {
+      & .e-list-item.e-disabled {
         color: $timepicker-disable-text;
         opacity: $timepicker-disable-opacity;
         pointer-events: none;
         touch-action: none;
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-hover {
+      & .e-list-item.e-hover {
         @if $skin-name == 'tailwind3' {
           background: $timepicker-list-hover-bg-color;
           color: $timepicker-list-hover-font-color;
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-navigation {
+      & .e-list-item.e-navigation {
         @if $skin-name == 'tailwind3' {
           background: $timepicker-list-navigation-bg-color;
           color: $timepicker-list-navigation-font-color;
@@ -65,16 +65,16 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item:focus {
+      & .e-list-item:focus {
         @if $skin-name == 'tailwind3' {
           background: $timepicker-list-focus-bg-color;
           color: $timepicker-list-focus-font-color;
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-hover,
-      #{if(&, '&', '*')} .e-list-item.e-navigation,
-      #{if(&, '&', '*')} .e-list-item:focus {
+      & .e-list-item.e-hover,
+      & .e-list-item.e-navigation,
+      & .e-list-item:focus {
         @if $timepicker-skin-name != 'Material3' {
           background-color: $timepicker-list-hover-bg-color;
         }
@@ -85,7 +85,7 @@
         color: $timepicker-list-hover-font-color;
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-active {
+      & .e-list-item.e-active {
         @if $timepicker-skin-name != 'Material3' and $timepicker-skin-name != 'tailwind3' {
           background-color: $timepicker-list-active-bg-color;
         }
@@ -98,7 +98,7 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
+      & .e-list-item.e-active.e-hover {
         @if $timepicker-skin-name != 'Material3' {
           background-color: $timepicker-list-active-hover-bg-color;
         }
@@ -111,9 +111,9 @@
   }
 
   .e-small #{&}.e-timepicker.e-popup,
-  #{if(&, '&', '*')}.e-small#{&}.e-timepicker.e-popup {
-    #{if(&, '&', '*')} .e-list-parent.e-ul {
-      #{if(&, '&', '*')} .e-list-item {
+  *.e-small#{&}.e-timepicker.e-popup {
+    & .e-list-parent.e-ul {
+      & .e-list-item {
         color: $timepicker-list-small-font-color;
       }
     }
@@ -122,11 +122,11 @@
   .e-timepicker-mob-popup-wrap .e-timepicker.e-popup-expand,
   .e-datetimepicker.e-popup-expand {
 
-    #{if(&, '&', '*')} .e-model-header {
+    & .e-model-header {
       background-color: $modal-header-bg-color;
       color: $modal-header-text-color;
 
-      #{if(&, '&', '*')} .e-popup-close {
+      & .e-popup-close {
         color: $modal-header-text-color;
         font-weight: $timepicker-model-title-font-weight;
       }

package/styles/timepicker/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';