@syncfusion/ej2-calendars 33.2.13 → 34.1.29

package/styles/calendar/_bigger.scss

@@ -1,8 +1,8 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('calendar-bigger') {
 
   .e-bigger#{&}.e-calendar,
-  #{if(&, '&', '*')}.e-bigger #{&}.e-calendar {
+  *.e-bigger #{&}.e-calendar {
     max-width: $calendar-bigger-max-width;
     min-width: $calendar-bigger-min-width;
     padding: $calendar-popup-bigger-padding;
@@ -10,18 +10,18 @@
       min-height: $calendar-bigger-min-height;
     }
 
-    #{if(&, '&', '*')}.e-calendar-day-header-lg {
+    &.e-calendar-day-header-lg {
       max-width: $calendar-lg-day-header-format-max-width;
       min-width: $calendar-lg-day-header-format-min-width;
     }
-    #{if(&, '&', '*')}.e-week {
+    &.e-week {
       max-width: $calendar-week-bigger-max-width;
       min-width: $calendar-week-bigger-min-width;
     }
-    #{if(&, '&', '*')}.e-week-number {
+    &.e-week-number {
       min-width: $calendar-weeknumber-bigger-width;
     }
-    #{if(&, '&', '*')} .e-header .e-title {
+    & .e-header .e-title {
       font-size: $calendar-bigger-header-font-size;
       @if $skin-name == 'bootstrap5.3' {
         line-height: $calendar-bigger-header-line-height;
@@ -32,81 +32,81 @@
       }
       width: $calendar-bigger-header-width;
     }
-    #{if(&, '&', '*')}:not(.e-rtl) .e-header.e-year .e-title,
-    #{if(&, '&', '*')}:not(.e-rtl) .e-header.e-month .e-title {
+    &:not(.e-rtl) .e-header.e-year .e-title,
+    &:not(.e-rtl) .e-header.e-month .e-title {
       @if $skin-name == 'Material3' {
         margin-left: -3px;
       }
     }
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       line-height: $calendar-bigger-header-height;
       text-indent: $calendar-bigger-rtl-header-text-indent;
     }
-    #{if(&, '&', '*')} .e-header {
+    & .e-header {
       height: $calendar-bigger-header-height;
       padding: $calendar-bigger-header-padding;
 
-      #{if(&, '&', '*')} button {
+      & button {
         margin-right: $calendar-bigger-icon-margin;
 
-        #{if(&, '&', '*')} span {
+        & span {
           font-size: $calendar-bigger-icon-font-size;
           padding: $calendar-bigger-icon-padding;
         }
       }
 
-      #{if(&, '&', '*')}.e-year,
-      #{if(&, '&', '*')}.e-decade {
+      &.e-year,
+      &.e-decade {
         padding: $calendar-bigger-yeardecade-header-padding;
       }
     }
-    #{if(&, '&', '*')} th {
+    & th {
       font-size: $calendar-bigger-week-header-font-size;
       height: $calendar-bigger-day-header-height;
       text-transform: $calendar-normal-day-header-text;
     }
-    #{if(&, '&', '*')} .e-content {
-      #{if(&, '&', '*')}.e-year span.e-day {
+    & .e-content {
+      &.e-year span.e-day {
         font-size: $calendar-bigger-yeardecade-font-size;
         font-weight: $calendar-bigger-yeardecade-font-weight;
       }
 
-      #{if(&, '&', '*')}.e-month table {
+      &.e-month table {
         padding: $calendar-bigger-table-month-padding;
       }
 
-      #{if(&, '&', '*')}.e-year table,
-      #{if(&, '&', '*')}.e-decade table	   {
+      &.e-year table,
+      &.e-decade table	   {
         padding: $calendar-bigger-table-yeardecade-padding;
       }
 
-      #{if(&, '&', '*')} .e-selected ,
-      #{if(&, '&', '*')} .e-state-hover {
+      & .e-selected,
+      & .e-state-hover {
         border-radius: $calendar-zero-border-radius;
       }
-      #{if(&, '&', '*')} span.e-day {
+      & span.e-day {
         font-size: $calendar-bigger-month-font-size;
         height: $calendar-bigger-month-view-height;
         line-height: $calendar-bigger-month-view-height;
         width: $calendar-bigger-month-view-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-month td.e-today span.e-day {
+    & .e-content.e-month td.e-today span.e-day {
       line-height: $calendar-bigger-month-view-line-height;
     }
-    #{if(&, '&', '*')} .e-content td.e-today span.e-day {
+    & .e-content td.e-today span.e-day {
       @if $skin-name == 'FluentUI' {
         height: 29px;
         width: 29px;
         line-height: 29px;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-month td {
+    & .e-content.e-month td {
       height: $calendar-bigger-month-view-padding;
       padding: $calendar-bigger-month-view-padding;
     }
-    #{if(&, '&', '*')} .e-content.e-year td,
-    #{if(&, '&', '*')} .e-content.e-decade td {
+    & .e-content.e-year td,
+    & .e-content.e-decade td {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         height: $calendar-bigger-year-decade-height;
         padding: $calendar-bigger-year-decade-padding;
@@ -117,8 +117,8 @@
         width: $calendar-bigger-year-decade-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
+    & .e-content.e-year td > span.e-day,
+    & .e-content.e-decade td > span.e-day {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         height: $calendar-bigger-year-decade-height;
         line-height: $calendar-bigger-year-decade-height;
@@ -130,32 +130,32 @@
         width: $calendar-bigger-year-decade-width;
       }
     }
-    #{if(&, '&', '*')} .e-header .e-icon-container {
-      #{if(&, '&', '*')} .e-prev,
-      #{if(&, '&', '*')} .e-next  {
+    & .e-header .e-icon-container {
+      & .e-prev,
+      & .e-next  {
         height: $calendar-bigger-icon-size;
         width: $calendar-bigger-icon-size;
       }
 
-      #{if(&, '&', '*')} .e-prev {
+      & .e-prev {
         @if $skin-name == 'tailwind' {
           margin: $calendar-bigger-down-icon-margin;
         }
       }
     }
-    #{if(&, '&', '*')} .e-footer-container {
+    & .e-footer-container {
       @if $skin-name != 'tailwind3' {
         border-top: $calendar-bigger-footer-border;
       }
       padding: $calendar-bigger-footer-container-padding;
     }
-    #{if(&, '&', '*')} .e-header .e-title {
+    & .e-header .e-title {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         margin-left: $calendar-title-margin-bigger-small-left-style;
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         text-indent: $calendar-rtl-bigger-text-indent;
       }
@@ -178,27 +178,27 @@
     }
     border: $calendar-border-style;
     box-shadow: $calendar-box-shadow;
-    #{if(&, '&', '*')} .e-date-icon-prev,
-    #{if(&, '&', '*')} .e-date-icon-next {
+    & .e-date-icon-prev,
+    & .e-date-icon-next {
       color: $calendar-header-icon-color;
     }
-    #{if(&, '&', '*')} th {
+    & th {
       border-bottom: $border-zero;
       color: $calendar-week-header-font-color;
     }
     @at-root {
-      #{if(&, '&', '*')} .e-header {
+      & .e-header {
         border-bottom: $border-zero;
-        #{if(&, '&', '*')} a {
-          #{if(&, '&', '*')} span {
+        & a {
+          & span {
             border: $calendar-default-border-color;
             color: $calendar-icon-font-color;
           }
         }
-        #{if(&, '&', '*')} .e-title {
+        & .e-title {
           color: $calendar-title-font-color;
         }
-        #{if(&, '&', '*')} .e-title:hover {
+        & .e-title:hover {
           background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
@@ -206,7 +206,7 @@
             color: $calendar-title-hover-color;
           }
         }
-        #{if(&, '&', '*')} .e-title:focus {
+        & .e-title:focus {
           box-shadow: $calendar-title-focus-box-shadow;
           @if $skin-name != 'fluent2' {
             background: $calendar-title-focus-background;
@@ -218,7 +218,7 @@
             text-decoration: $calendar-title-decoration-style;
           }
         }
-        #{if(&, '&', '*')} .e-title:active {
+        & .e-title:active {
           @if $skin-name == 'fluent2' {
             background: $calendar-title-active-background;
             color: $calendar-title-active-color;
@@ -229,73 +229,73 @@
             text-decoration: $calendar-title-decoration-style;
           }
         }
-        #{if(&, '&', '*')} .e-prev:hover > span,
-        #{if(&, '&', '*')} .e-next:hover > span {
+        & .e-prev:hover > span,
+        & .e-next:hover > span {
           border: $calendar-icon-hover-border-color;
           color: $calendar-icon-hover-color;
           cursor: pointer;
         }
 
-        #{if(&, '&', '*')} .e-prev:hover,
-        #{if(&, '&', '*')} .e-next:hover {
+        & .e-prev:hover,
+        & .e-next:hover {
           background: $calendar-icon-hover-bg-color;
           @if $skin-name == 'fluent2' {
             color: $calendar-active-font-color;
           }
         }
-        #{if(&, '&', '*')} .e-prev:focus,
-        #{if(&, '&', '*')} .e-next:focus {
+        & .e-prev:focus,
+        & .e-next:focus {
           box-shadow: $calendar-icon-focus-box-shadow;
         }
-        #{if(&, '&', '*')} .e-prev:active,
-        #{if(&, '&', '*')} .e-next:active {
+        & .e-prev:active,
+        & .e-next:active {
           background: $calendar-active-state-icon-bg-color;
           color: $calendar-active-font-color;
         }
-        #{if(&, '&', '*')} button.e-prev:active span,
-        #{if(&, '&', '*')} button.e-next:active span {
+        & button.e-prev:active span,
+        & button.e-next:active span {
           border: $calendar-selected-border-color;
           color: $calendar-active-icon-color;
         }
-        #{if(&, '&', '*')}.e-decade .e-title {
+        &.e-decade .e-title {
           @if $skin-name != 'fluent2' {
             color: $calendar-light-font;
             cursor: default;
           }
         }
-        #{if(&, '&', '*')} .e-next.e-disabled span,
-        #{if(&, '&', '*')} .e-prev.e-disabled span {
+        & .e-next.e-disabled span,
+        & .e-prev.e-disabled span {
           color: $calendar-disable-font-color;
           font-weight: $calendar-disable-font-weight-style;
         }
-        #{if(&, '&', '*')} .e-next.e-disabled,
-        #{if(&, '&', '*')} .e-prev.e-disabled {
+        & .e-next.e-disabled,
+        & .e-prev.e-disabled {
           opacity: $calendar-disable-opacity;
         }
       }
-      #{if(&, '&', '*')} .e-content.e-year,
-      #{if(&, '&', '*')} .e-content.e-decade {
-        #{if(&, '&', '*')} td.e-selected span.e-day {
+      & .e-content.e-year,
+      & .e-content.e-decade {
+        & td.e-selected span.e-day {
           @if $skin-name == 'fluent2' {
             font-weight: $font-weight-semibold;
           }
         }
       }
-      #{if(&, '&', '*')} .e-content {
-        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell:first-child span.e-day,
-        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell:last-child span.e-day {
+      & .e-content {
+        &.e-decade tr:first-child .e-cell:first-child span.e-day,
+        &.e-decade tr:last-child .e-cell:last-child span.e-day {
           color: $calendar-other-decade-cell-color;
         }
-        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell:first-child.e-selected span.e-day,
-        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell:last-child.e-selected span.e-day {
+        &.e-decade tr:first-child .e-cell:first-child.e-selected span.e-day,
+        &.e-decade tr:last-child .e-cell:last-child.e-selected span.e-day {
           color: $calendar-active-font-color;
         }
-        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell.e-disabled:first-child span.e-day,
-        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell.e-disabled:last-child span.e-day {
+        &.e-decade tr:first-child .e-cell.e-disabled:first-child span.e-day,
+        &.e-decade tr:last-child .e-cell.e-disabled:last-child span.e-day {
           color: $calendar-disable-font-color;
         }
-        #{if(&, '&', '*')}.e-year td:hover span.e-day,
-        #{if(&, '&', '*')}.e-decade td:hover span.e-day {
+        &.e-year td:hover span.e-day,
+        &.e-decade td:hover span.e-day {
           @if ($skin-name != 'Material3' and $skin-name == 'fluent2') {
             background-color: $calendar-hover-color;
           }
@@ -303,8 +303,8 @@
             background: $calendar-hover-color;
           }
         }
-        #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
-        #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {
+        &.e-year td.e-selected:hover span.e-day,
+        &.e-decade td.e-selected:hover span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-yeardecade-selected-hover-bg;
           }
@@ -313,18 +313,18 @@
           }
         }
 
-        #{if(&, '&', '*')}.e-year td > span.e-day,
-        #{if(&, '&', '*')}.e-decade td > span.e-day {
+        &.e-year td > span.e-day,
+        &.e-decade td > span.e-day {
           background: $calendar-yeardecade-bg-color;
         }
 
-        #{if(&, '&', '*')} .e-week-number span {
+        & .e-week-number span {
           color: $calendar-week-number-color-style;
         }
 
-        #{if(&, '&', '*')} td.e-focused-date span.e-day,
-        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day,
-        #{if(&, '&', '*')} td.e-focused-date:focus span.e-day {
+        & td.e-focused-date span.e-day,
+        & td.e-focused-date:hover span.e-day,
+        & td.e-focused-date:focus span.e-day {
           @if $skin-name != 'tailwind3' {
             background: $calendar-focused-date-bg-style;
           }
@@ -340,7 +340,7 @@
             font-weight: $font-weight-semibold;
           }
         }
-        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
+        & td.e-focused-date:hover span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
@@ -351,8 +351,8 @@
           border-radius: $calendar-border-radius;
           color: $calendar-text-color;
         }
-        #{if(&, '&', '*')} td.e-today span.e-day,
-        #{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
+        & td.e-today span.e-day,
+        & td.e-focused-date.e-today span.e-day {
           background: $calendar-today-bg-style;
           border: $calendar-today-border-color;
           @if $skin-name != 'fluent2' {
@@ -367,14 +367,14 @@
             border-radius: $calendar-border-selected-radius;
           }
         }
-        #{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
+        & td.e-focused-date.e-today span.e-day {
           background: $calendar-focused-today-bg-style;
           border: $calendar-focused-today-border-style;
           box-shadow: $calendar-focused-today-box-shadow;
           color: $calendar-today-focused-font-color;
         }
-        #{if(&, '&', '*')} td.e-today:focus span.e-day,
-        #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
+        & td.e-today:focus span.e-day,
+        & td.e-focused-date.e-today:focus span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-focus-bg-color;
           }
@@ -397,9 +397,9 @@
             border-radius: $calendar-border-selected-radius;
           }
         }
-        #{if(&, '&', '*')} td.e-today:hover span.e-day,
-        #{if(&, '&', '*')} td.e-focused-date.e-today:hover span.e-day,
-        #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
+        & td.e-today:hover span.e-day,
+        & td.e-focused-date.e-today:hover span.e-day,
+        & td.e-focused-date.e-today:focus span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
@@ -417,7 +417,7 @@
             border-radius: $calendar-border-selected-radius;
           }
         }
-        #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
+        & td.e-today.e-selected span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-active-bg-color;
           }
@@ -437,15 +437,15 @@
           }
           color: $calendar-active-today-font-color;
         }
-        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day {
+        & td.e-today.e-selected:hover span.e-day {
           @if $skin-name == 'fluent2' {
             border-radius: $calendar-today-border-radius;
           }
         }
 
-        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
-        #{if(&, '&', '*')} td.e-selected:hover span.e-day,
-        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
+        & td.e-today.e-selected:hover span.e-day,
+        & td.e-selected:hover span.e-day,
+        & td.e-selected.e-focused-date span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
             background-color: $calendar-active-hover-bg-color;
           }
@@ -459,24 +459,24 @@
             color: $calendar-today-color;
           }
         }
-        #{if(&, '&', '*')} span {
+        & span {
           color: $calendar-text-color;
         }
-        #{if(&, '&', '*')} .e-disabled span.e-day:hover {
+        & .e-disabled span.e-day:hover {
           background: $calendar-none-style;
           border: $border-zero;
           color: $calendar-disable-font-color;
         }
-        #{if(&, '&', '*')} .e-other-month:hover span.e-day {
+        & .e-other-month:hover span.e-day {
           @if ($skin-name != 'fabric-dark') {
             color: $calendar-other-month-date-hover-bg;
           }
         }
-        #{if(&, '&', '*')} .e-other-month span.e-day,
-        #{if(&, '&', '*')} .e-other-month.e-today span.e-day {
+        & .e-other-month span.e-day,
+        & .e-other-month.e-today span.e-day {
           color: $calendar-other-month-date;
         }
-        #{if(&, '&', '*')} .e-other-month.e-today:hover span.e-day {
+        & .e-other-month.e-today:hover span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
@@ -492,12 +492,12 @@
             color: $calendar-today-color;
           }
         }
-        #{if(&, '&', '*')} thead {
+        & thead {
           background: $calendar-week-header-bg-style;
           border-bottom: $border-zero;
         }
-        #{if(&, '&', '*')} td:hover span.e-day,
-        #{if(&, '&', '*')} td:focus span.e-day {
+        & td:hover span.e-day,
+        & td:focus span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
@@ -508,7 +508,7 @@
           border-radius: $calendar-border-radius;
           color: $calendar-hover-text;
         }
-        #{if(&, '&', '*')} td:focus span.e-day {
+        & td:focus span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-focus-bg-color;
             color: $calendar-text-color;
@@ -523,23 +523,23 @@
             border-radius: $calendar-border-selected-radius;
           }
         }
-        #{if(&, '&', '*')} td.e-disabled span.e-day,
-        #{if(&, '&', '*')} td.e-disabled:hover span.e-day,
-        #{if(&, '&', '*')} td.e-disabled:focus span.e-day {
+        & td.e-disabled span.e-day,
+        & td.e-disabled:hover span.e-day,
+        & td.e-disabled:focus span.e-day {
           background: $calendar-none-style;
           border: $calendar-none-style;
           color: $calendar-disable-font-color;
         }
-        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay span.e-day,
-        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:hover span.e-day,
-        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:focus span.e-day {
+        & td.e-today.e-disabled.e-overlay span.e-day,
+        & td.e-today.e-disabled.e-overlay:hover span.e-day,
+        & td.e-today.e-disabled.e-overlay:focus span.e-day {
           @if ($skin-name == 'FluentUI') {
             background-color: $calendar-focused-today-bg-style;
             border-radius: $calendar-border-selected-radius;
             color: $calendar-today-color;
           }
         }
-        #{if(&, '&', '*')} td.e-selected span.e-day {
+        & td.e-selected span.e-day {
           @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
             background-color: $calendar-active-bg-color;
           }
@@ -561,38 +561,38 @@
             border-radius: $calendar-border-radius;
           }
         }
-        #{if(&, '&', '*')} td.e-selected:not(.e-focused-date) span.e-day {
+        & td.e-selected:not(.e-focused-date) span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             box-shadow: $calendar-selected-box-shadow;
           }
         }
-        #{if(&, '&', '*')} .e-footer {
+        & .e-footer {
           color: $calendar-active-bg-color;
         }
-        #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date span.e-day,
-        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
-        #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
+        & td.e-today.e-selected.e-focused-date span.e-day,
+        & td.e-today.e-selected:hover span.e-day,
+        & td.e-today.e-selected span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-focused-today-bg-style;
             border-radius: $calendar-border-selected-radius;
             color: $calendar-today-color;
           }
         }
-        #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date {
+        & td.e-today.e-selected.e-focused-date {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border-radius: $calendar-focused-state-border-radius;
             box-shadow: $calendar-focused-state-box-shadow;
           }
         }
-        #{if(&, '&', '*')} td.e-today.e-selected {
+        & td.e-today.e-selected {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border-radius: $calendar-wrapper-border-radius;
             box-shadow: $calendar-selected-box-shadow;
           }
         }
-        #{if(&, '&', '*')} td.e-selected:hover span.e-day {
+        & td.e-selected:hover span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border: $calendar-selected-border-color;
@@ -600,7 +600,7 @@
             color: $calendar-active-font-color;
           }
         }
-        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
+        & td.e-selected.e-focused-date span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border: $calendar-selected-border-color;
@@ -608,46 +608,46 @@
             color: $calendar-active-font-color;
           }
         }
-        #{if(&, '&', '*')}.e-month td.e-today span.e-day {
+        &.e-month td.e-today span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             color: $calendar-today-focused-font-color;
           }
         }
-        #{if(&, '&', '*')}.e-month td.e-disabled.e-today span.e-day {
+        &.e-month td.e-disabled.e-today span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             color: $calendar-today-disabled-color;
           }
         }
-        #{if(&, '&', '*')}.e-year td.e-selected > span.e-day,
-        #{if(&, '&', '*')}.e-decade td.e-selected > span.e-day,
-        #{if(&, '&', '*')}.e-year td.e-selected:hover > span.e-day,
-        #{if(&, '&', '*')}.e-decade td.e-selected:hover > span.e-day {
+        &.e-year td.e-selected > span.e-day,
+        &.e-decade td.e-selected > span.e-day,
+        &.e-year td.e-selected:hover > span.e-day,
+        &.e-decade td.e-selected:hover > span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-selected-month-bg-color;
             color: $calendar-week-header-font-color;
           }
         }
-        #{if(&, '&', '*')}.e-year td.e-focused-date > span.e-day,
-        #{if(&, '&', '*')}.e-decade td.e-focused-date > span.e-day {
+        &.e-year td.e-focused-date > span.e-day,
+        &.e-decade td.e-focused-date > span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background: $calendar-none-style;
             border-radius: $calendar-zero-border-radius;
             box-shadow: $calendar-focused-state-month-box-shadow;
           }
         }
-        #{if(&, '&', '*')} td.e-focused-date.e-today {
+        & td.e-focused-date.e-today {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             border-radius: $calendar-focused-state-border-radius;
             box-shadow: $calendar-focused-state-box-shadow;
           }
         }
-        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
+        & td.e-focused-date:hover span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             border-radius: $calendar-focused-state-border-radius;
           }
         }
-        #{if(&, '&', '*')}.e-year td.e-focused-date:hover > span.e-day,
-        #{if(&, '&', '*')}.e-decade td.e-focused-date:hover > span.e-day {
+        &.e-year td.e-focused-date:hover > span.e-day,
+        &.e-decade td.e-focused-date:hover > span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background: $calendar-hover-color;
             border-radius: $calendar-zero-border-radius;
@@ -656,23 +656,23 @@
         }
       }
     }
-    #{if(&, '&', '*')}.e-device {
-      #{if(&, '&', '*')} .e-prev:hover,
-      #{if(&, '&', '*')} .e-next:hover,
-      #{if(&, '&', '*')} .e-prev:active,
-      #{if(&, '&', '*')} .e-next:active,
-      #{if(&, '&', '*')} .e-prev:focus,
-      #{if(&, '&', '*')} .e-next:focus {
+    &.e-device {
+      & .e-prev:hover,
+      & .e-next:hover,
+      & .e-prev:active,
+      & .e-next:active,
+      & .e-prev:focus,
+      & .e-next:focus {
         background: $calendar-device-icon-hover-bg-color;
       }
-      #{if(&, '&', '*')} button.e-prev:active span,
-      #{if(&, '&', '*')} button.e-next:active span {
+      & button.e-prev:active span,
+      & button.e-next:active span {
         color: $calendar-header-icon-color;
       }
     }
 
-    #{if(&, '&', '*')} .e-footer-container {
-      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary:not(:hover) {
+    & .e-footer-container {
+      & .e-btn.e-today.e-flat.e-primary:not(:hover) {
         @if $skin-name == 'tailwind' {
           -webkit-tap-highlight-color: transparent;
           background-color: $calendar-today-btn-primary-bgcolor;
@@ -681,7 +681,7 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary.e-disabled {
+      & .e-btn.e-today.e-flat.e-primary.e-disabled {
         @if $skin-name == 'tailwind' {
           -webkit-tap-highlight-color: transparent;
           background-color: $calendar-today-btn-primary-disabled-bgcolor;
@@ -700,14 +700,14 @@
     overflow: auto;
     user-select: $calendar-none-style;
 
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       float: $calendar-float-right-style;
       text-align: $calendar-float-right-style;
     }
-    #{if(&, '&', '*')}.e-rtl .e-header .e-icon-container {
+    &.e-rtl .e-header .e-icon-container {
       float: $calendar-float-left-style;
     }
-    #{if(&, '&', '*')} .e-header {
+    & .e-header {
       background: $calendar-none-style;
       display: table;
       font-weight: $calendar-spanicon-font-weight-style;
@@ -715,14 +715,14 @@
       text-align: center;
       width: $calendar-full-width;
 
-      #{if(&, '&', '*')} button {
+      & button {
         background: transparent;
         border: $border-zero;
         margin-right: $calendar-icon-button-margin;
         padding: $padding-zero;
         text-decoration: $calendar-none-style;
       }
-      #{if(&, '&', '*')} span {
+      & span {
         cursor: $calendar-cursor-pointer-style;
         display: inline-block;
         font-size: $calendar-icon-font-size-style;
@@ -731,26 +731,26 @@
         padding: $calendar-icon-padding;
         vertical-align: middle;
 
-        #{if(&, '&', '*')}.e-disabled {
+        &.e-disabled {
           cursor: $calendar-cursor-default-style;
         }
       }
     }
-    #{if(&, '&', '*')} .e-week-header {
+    & .e-week-header {
       padding: $calendar-thead-padding;
     }
-    #{if(&, '&', '*')} th {
+    & th {
       cursor: $calendar-cursor-default-style;
       font-size: $calendar-header-font-size;
       font-weight: normal;
       text-align: center;
     }
-    #{if(&, '&', '*')} .e-content {
-      #{if(&, '&', '*')} .e-selected ,
-      #{if(&, '&', '*')} .e-state-hover {
+    & .e-content {
+      & .e-selected,
+      & .e-state-hover {
         border-radius: $calendar-zero-border-radius;
       }
-      #{if(&, '&', '*')} span.e-day {
+      & span.e-day {
         border-radius: $calendar-zero-border-radius;
         cursor: $calendar-cursor-pointer-style;
         display: $calendar-inline-block-style;
@@ -761,29 +761,29 @@
         text-decoration: $calendar-none-style;
         vertical-align: middle;
       }
-      #{if(&, '&', '*')} th,
-      #{if(&, '&', '*')} td {
+      & th,
+      & td {
         box-sizing: border-box;
       }
-      #{if(&, '&', '*')} td.e-disabled {
+      & td.e-disabled {
         opacity: $calendar-disable-opacity;
         pointer-events: $calendar-none-style;
         touch-action: $calendar-none-style;
       }
-      #{if(&,'&','*')} td.e-disabled.e-today {
+      & td.e-disabled.e-today {
         @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'highcontrast' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
           opacity: 1;
-          #{if(&,'&','*')} span.e-day {
+          & span.e-day {
             box-shadow: $calendar-disabled-today-box-shadow;
             color: $calendar-disabled-today-font-color;
           }
         }
       }
-      #{if(&, '&', '*')} td {
+      & td {
         cursor: pointer;
         padding: $calendar-yeardeacde-span-padding;
         text-align: center;
-        #{if(&, '&', '*')}.e-week-number {
+        &.e-week-number {
           color: $calendar-week-number-font-color;
           font-size: $calendar-week-number-font-size-style;
           font-style: $calendar-week-number-font-style;
@@ -796,12 +796,12 @@
             border-right: $calendar-week-number-border;
           }
         }
-        #{if(&, '&', '*')}.e-overlay {
+        &.e-overlay {
           background: $calendar-none-style;
           width: initial;
         }
       }
-      #{if(&, '&', '*')} td:hover {
+      & td:hover {
         @if skin-name == 'fluent2' {
           border-radius: $calendar-td-hover-border-radius;
           background: $calendar-hover-border-color;
@@ -819,29 +819,29 @@
         table-layout: fixed;
         width: $calendar-full-width;
       }
-      #{if(&, '&', '*')} td.e-other-month > span.e-day,
-      #{if(&, '&', '*')} td.e-other-year > span.e-day {
+      & td.e-other-month > span.e-day,
+      & td.e-other-year > span.e-day {
         display: $calendar-other-month-display-style;
         font-weight: $calendar-link-font-weight-style;
       }
-      #{if(&, '&', '*')} tr.e-month-hide {
+      & tr.e-month-hide {
         display: $calendar-other-month-row-display-style;
         font-weight: $calendar-link-font-weight-style;
       }
-      #{if(&, '&', '*')} tr.e-month-hide,
-      #{if(&, '&', '*')} td.e-other-month,
-      #{if(&, '&', '*')} td.e-other-year {
+      & tr.e-month-hide,
+      & td.e-other-month,
+      & td.e-other-year {
         pointer-events: $calendar-pointer-events;
         touch-action: $calendar-pointer-events;
       }
-      #{if(&, '&', '*')} tr.e-month-hide,
-      #{if(&, '&', '*')} td.e-other-month.e-disabled,
-      #{if(&, '&', '*')} td.e-other-year.e-disabled {
+      & tr.e-month-hide,
+      & td.e-other-month.e-disabled,
+      & td.e-other-year.e-disabled {
         pointer-events: $calendar-none-style;
         touch-action: $calendar-none-style;
       }
-      #{if(&, '&', '*')} td.e-week-number:hover span.e-day,
-      #{if(&, '&', '*')} td.e-week-number:hover {
+      & td.e-week-number:hover span.e-day,
+      & td.e-week-number:hover {
         @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
           background-color: $calendar-bg-color;
         }
@@ -854,15 +854,15 @@
         }
       }
     }
-    #{if(&, '&', '*')} .e-header {
-      #{if(&, '&', '*')} .e-prev,
-      #{if(&, '&', '*')} .e-next {
+    & .e-header {
+      & .e-prev,
+      & .e-next {
         border-radius: $calendar-border-radius;
         display: inline-block;
         font-size: $calendar-next-prev-icon-size;
         vertical-align: middle;
       }
-      #{if(&, '&', '*')} .e-title {
+      & .e-title {
         cursor: $calendar-cursor-pointer-style;
         display: $calendar-inline-block-style;
         float: $calendar-float-left-style;
@@ -873,31 +873,31 @@
         border: $calendar-none-style;
         border-radius: $calendar-title-border-radius;
       }
-      #{if(&, '&', '*')} .e-title {
+      & .e-title {
         margin-left: $calendar-title-margin-left-style;
       }
-      #{if(&, '&', '*')} .e-prev:hover,
-      #{if(&, '&', '*')} .e-next:hover {
+      & .e-prev:hover,
+      & .e-next:hover {
         cursor: $calendar-cursor-pointer-style;
       }
-      #{if(&, '&', '*')} .e-prev.e-overlay,
-      #{if(&, '&', '*')} .e-next.e-overlay {
+      & .e-prev.e-overlay,
+      & .e-next.e-overlay {
         background: $calendar-none-style;
       }
     }
-    #{if(&, '&', '*')} .e-header.e-decade .e-title,
-    #{if(&, '&', '*')} .e-header.e-year .e-title {
+    & .e-header.e-decade .e-title,
+    & .e-header.e-year .e-title {
       margin-left: $calendar-decade-title-left-margin-style;
     }
-    #{if(&, '&', '*')} .e-header.e-decade .e-title {
+    & .e-header.e-decade .e-title {
       cursor: $calendar-cursor-default-style;
     }
-    #{if(&, '&', '*')} .e-header .e-icon-container {
+    & .e-header .e-icon-container {
       display: $calendar-inline-block-style;
       float: $calendar-float-right-style;
       padding-top: $calendar-icon-padding-top;
     }
-    #{if(&, '&', '*')} .e-footer-container {
+    & .e-footer-container {
       text-transform: uppercase;
     }
   }
@@ -917,48 +917,48 @@
       min-height: $calendar-normal-min-height;
     }
 
-    #{if(&, '&', '*')}.e-calendar-day-header-lg {
+    &.e-calendar-day-header-lg {
       max-width: $calendar-lg-day-header-format-max-width;
       min-width: $calendar-lg-day-header-format-min-width;
     }
-    #{if(&, '&', '*')}.e-week-number {
+    &.e-week-number {
       min-width: $calendar-weeknumber-min-width;
     }
 
-    #{if(&, '&', '*')}.e-week {
+    &.e-week {
       max-width: $calendar-week-normal-max-width;
       min-width: $calendar-week-normal-min-width;
     }
-    #{if(&, '&', '*')} .e-header .e-title {
+    & .e-header .e-title {
       line-height: $calendar-normal-header-height;
     }
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       text-align: $calendar-float-right-style;
       text-indent: $calendar-rtl-text-indent;
     }
-    #{if(&, '&', '*')} .e-header {
+    & .e-header {
       height: $calendar-normal-header-height;
 
-      #{if(&, '&', '*')}.e-month {
+      &.e-month {
         padding: $calendar-normal-header-padding;
       }
 
-      #{if(&, '&', '*')}.e-year,
-      #{if(&, '&', '*')}.e-decade {
+      &.e-year,
+      &.e-decade {
         padding: $calendar-yeardecade-header-padding;
       }
     }
-    #{if(&, '&', '*')} th {
+    & th {
       font-weight: $calendar-normal-day-header-font-weight;
       height: $calendar-normal-day-header-height;
       text-transform: $calendar-normal-day-header-text;
     }
-    #{if(&, '&', '*')} .e-content {
-      #{if(&, '&', '*')} .e-selected ,
-      #{if(&, '&', '*')} .e-state-hover {
+    & .e-content {
+      & .e-selected,
+      & .e-state-hover {
         border-radius: $calendar-zero-border-radius;
       }
-      #{if(&, '&', '*')} span.e-day {
+      & span.e-day {
         border: $calendar-default-border-color;
         font-size: $calendar-date-font-size;
         font-weight: $calendar-link-font-weight-style;
@@ -967,31 +967,31 @@
         width: $calendar-normal-month-view-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-month td.e-today span.e-day {
+    & .e-content.e-month td.e-today span.e-day {
       line-height: $calendar-normal-month-view-line-height;
     }
-    #{if(&, '&', '*')} .e-content td.e-today span.e-day {
+    & .e-content td.e-today span.e-day {
       @if $skin-name == 'FluentUI' {
         height: 25px;
         width: 25px;
         line-height: 25px;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-year table,
-    #{if(&, '&', '*')} .e-content.e-decade table {
+    & .e-content.e-year table,
+    & .e-content.e-decade table {
       border-spacing: 0;
       padding: $calendar-yeardecade-padding;
     }
-    #{if(&, '&', '*')} .e-content.e-month td {
+    & .e-content.e-month td {
       height: $calendar-normal-month-view-height;
       padding: $calendar-normal-month-cell-padding;
     }
-    #{if(&, '&', '*')} .e-content .tfooter > tr > td {
+    & .e-content .tfooter > tr > td {
       height: $calendar-normal-today-button-height;
       line-height: $calendar-normal-today-button-height;
     }
-    #{if(&, '&', '*')} .e-content.e-year td,
-    #{if(&, '&', '*')} .e-content.e-decade td {
+    & .e-content.e-year td,
+    & .e-content.e-decade td {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         height: $calendar-normal-year-decade-height;
         padding: $calendar-normal-year-decade-padding;
@@ -1002,8 +1002,8 @@
         width: $calendar-normal-year-decade-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
+    & .e-content.e-year td > span.e-day,
+    & .e-content.e-decade td > span.e-day {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         font-weight: $calendar-yeardecade-font-weight;
         height: $calendar-normal-year-decade-height;
@@ -1017,28 +1017,28 @@
         width: $calendar-normal-year-decade-width;
       }
     }
-    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date) > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date) > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date):hover > span.e-day,
-    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date):hover > span.e-day {
+    & .e-content.e-year td.e-selected:not(.e-focused-date) > span.e-day,
+    & .e-content.e-decade td.e-selected:not(.e-focused-date) > span.e-day,
+    & .e-content.e-year td.e-selected:not(.e-focused-date):hover > span.e-day,
+    & .e-content.e-decade td.e-selected:not(.e-focused-date):hover > span.e-day {
       @if ($skin-name == 'FluentUI') {
         box-shadow: $calendar-none-style;
       }
     }
-    #{if(&, '&', '*')} .e-header .e-icon-container {
-      #{if(&, '&', '*')} .e-prev,
-      #{if(&, '&', '*')} .e-next {
+    & .e-header .e-icon-container {
+      & .e-prev,
+      & .e-next {
         height: $calendar-normal-icon-size;
         width: $calendar-normal-icon-size;
       }
 
-      #{if(&, '&', '*')} .e-prev {
+      & .e-prev {
         @if $skin-name == 'tailwind' {
           margin: $calendar-normal-down-icon-margin;
         }
       }
     }
-    #{if(&, '&', '*')} .e-footer-container {
+    & .e-footer-container {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
         background-color: $calendar-footer-background;
       }
@@ -1059,7 +1059,7 @@
       padding: $calendar-footer-container-padding;
       width: $calendar-full-width;
     }
-    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
+    &.e-rtl .e-header .e-title {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         text-indent: $calendar-rtl-bigger-small-text-indent;
       }
@@ -1073,53 +1073,53 @@
       min-width: $calendar-bigger-small-min-width;
     }
 
-    #{if(&, '&', '*')} .e-footer-container {
+    & .e-footer-container {
       @if $skin-name == 'tailwind' {
         padding: $calendar-bigger-small-footer-container-padding;
       }
     }
 
-    #{if(&, '&', '*')} .e-content.e-year {
-      #{if(&, '&', '*')} span.e-day {
+    & .e-content.e-year {
+      & span.e-day {
         font-size: $calendar-bigger-small-yeardecade-font-size;
       }
     }
 
-    #{if(&, '&', '*')} .e-header {
-      #{if(&, '&', '*')}.e-month,
-      #{if(&, '&', '*')}.e-year,
-      #{if(&, '&', '*')}.e-decade {
+    & .e-header {
+      &.e-month,
+      &.e-year,
+      &.e-decade {
         @if $skin-name == 'tailwind' {
           padding: $calendar-bigger-small-header-padding;
         }
       }
 
-      #{if(&, '&', '*')} .e-icon-container .e-prev {
+      & .e-icon-container .e-prev {
         @if $skin-name == 'tailwind' {
           margin: $calendar-bigger-small-down-icon-margin;
         }
       }
     }
 
-    #{if(&, '&', '*')} .e-content.e-month table {
+    & .e-content.e-month table {
       padding: $calendar-bigger-small-table-padding;
     }
 
-    #{if(&, '&', '*')} .e-content.e-year table,
-    #{if(&, '&', '*')} .e-content.e-decade table {
+    & .e-content.e-year table,
+    & .e-content.e-decade table {
       @if $skin-name == 'tailwind' {
         padding: $calendar-bigger-small-table-padding;
       }
     }
 
-    #{if(&, '&', '*')} th {
+    & th {
       @if $skin-name == 'tailwind' {
         height: $calendar-bigger-small-day-header-height;
       }
     }
 
-    #{if(&, '&', '*')} .e-content {
-      #{if(&, '&', '*')} span.e-day {
+    & .e-content {
+      & span.e-day {
         @if $skin-name == 'tailwind' {
           height: $calendar-bigger-small-month-view-height;
           line-height: $calendar-bigger-small-month-view-height;
@@ -1127,25 +1127,25 @@
         }
       }
 
-      #{if(&, '&', '*')}.e-month td.e-today span.e-day {
+      &.e-month td.e-today span.e-day {
         @if $skin-name == 'tailwind' {
           line-height: $calendar-bigger-small-month-view-line-height;
         }
       }
-      #{if(&, '&', '*')}.e-month td {
+      &.e-month td {
         @if $skin-name == 'tailwind' {
           height: $calendar-bigger-small-month-view-height;
         }
       }
     }
 
-    #{if(&, '&', '*')} .e-content span.e-day {
+    & .e-content span.e-day {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         height: $calendar-day-bigger-small-cell-size;
         width: $calendar-day-bigger-small-cell-size;
       }
     }
-    #{if(&, '&', '*')} .e-header .e-title {
+    & .e-header .e-title {
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         margin-left: $calendar-title-margin-bigger-small-left-style;
       }