@syncfusion/ej2-calendars 33.2.15 → 34.2.2

package/styles/daterangepicker/_bigger.scss

@@ -1,8 +1,8 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('daterangepicker-bigger') {
 
   .e-bigger #{&}.e-daterangepicker.e-range-modal,
-  #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker.e-range-modal {
+  *.e-device#{&}.e-daterangepicker.e-range-modal {
     @if $skin-name != 'Material3' {
       background-color: $range-overlay;
     }
@@ -20,9 +20,9 @@
   }
 
   .e-bigger #{&}.e-daterangepicker,
-  #{if(&, '&', '*')}.e-bigger#{&}.e-daterangepicker,
-  #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker {
-    #{if(&, '&', '*')}.e-popup {
+  *.e-bigger#{&}.e-daterangepicker,
+  *.e-device#{&}.e-daterangepicker {
+    &.e-popup {
       @if $skin-name == 'material' or $skin-name == 'bootstrap'{
         background-color: $range-background;
       }
@@ -30,28 +30,28 @@
         background: $range-background;
       }
 
-      #{if(&, '&', '*')} .e-start-label,
-      #{if(&, '&', '*')} .e-end-label {
+      & .e-start-label,
+      & .e-end-label {
         @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
           font-size: $range-bigger-header-label-size;
         }
       }
 
-      #{if(&, '&', '*')} .e-day-span {
+      & .e-day-span {
         @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
           font-size: $range-bigger-indicator-label-size;
         }
       }
 
-      #{if(&, '&', '*')}.e-preset-wrapper {
+      &.e-preset-wrapper {
         max-width: $range-bigger-max-width;
         min-width: $range-width-auto;
 
-        #{if(&, '&', '*')} .e-presets {
+        & .e-presets {
           max-height: $range-value-none;
         }
       }
-      #{if(&, '&', '*')} .e-range-header {
+      & .e-range-header {
         @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           margin: $range-control-bigger-header-margin;
         }
@@ -61,13 +61,13 @@
         }
         width: $range-control-header-width;
 
-        #{if(&, '&', '*')} .e-change-icon {
+        & .e-change-icon {
           @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
             font-size: $range-bigger-change-icon-size;
           }
         }
 
-        #{if(&, '&', '*')} .e-start-end {
+        & .e-start-end {
           align-items: $range-align-center;
           cursor: $range-cursor-pointer-style;
           display: $range-flex-style;
@@ -76,8 +76,8 @@
           user-select: $range-browser-select-none;
           width: $range-device-header-container-width;
 
-          #{if(&, '&', '*')} .e-start-btn,
-          #{if(&, '&', '*')} .e-end-btn {
+          & .e-start-btn,
+          & .e-end-btn {
             border: $range-btn-border-value;
             box-shadow: $range-box-shadow-none;
             font-size: $range-calendar-btn-font-size;
@@ -90,42 +90,42 @@
             text-overflow: $range-text-overflow;
             width: $range-btn-width;
           }
-          #{if(&, '&', '*')} .e-end-btn {
+          & .e-end-btn {
             border-left: $range-value-zero;
             border-radius: $range-btn-right-radius;
           }
-          #{if(&, '&', '*')} .e-start-btn {
+          & .e-start-btn {
             border-radius: $range-btn-left-radius;
           }
-          #{if(&, '&', '*')} .e-start-btn:hover,
-          #{if(&, '&', '*')} .e-end-btn:hover:not([disabled]) {
+          & .e-start-btn:hover,
+          & .e-end-btn:hover:not([disabled]) {
             box-shadow: $range-box-shadow-none;
           }
-          #{if(&, '&', '*')} .e-start-btn.e-active,
-          #{if(&, '&', '*')} .e-start-btn.e-active:active,
-          #{if(&, '&', '*')} .e-end-btn.e-active,
-          #{if(&, '&', '*')} .e-end-btn.e-active:active:not([disabled]),
-          #{if(&, '&', '*')} .e-start-btn.e-active:hover,
-          #{if(&, '&', '*')} .e-end-btn.e-active:hover {
+          & .e-start-btn.e-active,
+          & .e-start-btn.e-active:active,
+          & .e-end-btn.e-active,
+          & .e-end-btn.e-active:active:not([disabled]),
+          & .e-start-btn.e-active:hover,
+          & .e-end-btn.e-active:hover {
             box-shadow: $range-box-shadow-none;
           }
-          #{if(&, '&', '*')} .e-start-btn,
-          #{if(&, '&', '*')} .e-end-btn {
+          & .e-start-btn,
+          & .e-end-btn {
             max-width: $range-header-btn-bigger-max-width;
           }
         }
       }
-      #{if(&, '&', '*')} .e-presets {
+      & .e-presets {
         max-height: $range-bigger-presets-height;
 
-        #{if(&, '&', '*')}.e-preset-wrapper {
+        &.e-preset-wrapper {
           max-height: $range-value-none;
         }
 
-        #{if(&, '&', '*')} ul {
+        & ul {
           max-width: $range-value-none;
 
-          #{if(&, '&', '*')} li.e-list-item {
+          & li.e-list-item {
             font-size: $range-presets-bigger-list-font-size;
             height: $range-preset-bigger-list-height;
             line-height: $range-preset-bigger-list-height;
@@ -134,86 +134,86 @@
         }
       }
     }
-    #{if(&, '&', '*')} .e-calendar {
+    & .e-calendar {
       max-width: $range-calendar-bigger-max;
       @if ($skin-name != 'FluentUI') {
         padding: $range-bigger-calendar-popup-padding;
       }
 
-      #{if(&, '&', '*')} .e-content table {
+      & .e-content table {
         @if ($skin-name != 'FluentUI') {
           padding: $range-calendar-bigger-table-padding;
         }
       }
-      #{if(&, '&', '*')} .e-header {
+      & .e-header {
         @if ($skin-name == 'FluentUI') {
           padding: 8px 16px;
         }
         
-        #{if(&, '&', '*')} .e-next,
-        #{if(&, '&', '*')} .e-prev {
+        & .e-next,
+        & .e-prev {
           height: $range-bigger-nav-icon-height;
           width: $range-bigger-nav-icon-width;
 
-          #{if(&, '&', '*')} span {
+          & span {
             padding: $range-icon-bigger-padding;
           }
         }
 
-        #{if(&, '&', '*')} .e-title {
+        & .e-title {
           cursor: $range-cursor-pointer-style;
           line-height: $range-bigger-nav-icon-height;
         }
-        #{if(&, '&', '*')}.e-month,
-        #{if(&, '&', '*')}.e-year,
-        #{if(&, '&', '*')}.e-decade {
+        &.e-month,
+        &.e-year,
+        &.e-decade {
           @if ($skin-name != 'FluentUI') {
             padding: $range-e-bigger-header-padding;
           }
         }
       }
     }
-    #{if(&, '&', '*')} .e-footer {
+    & .e-footer {
       height: $range-bigger-footer-height;
 
-      #{if(&, '&', '*')} .e-btn {
+      & .e-btn {
         height: $range-btn-bigger-height;
         line-height: $range-btn-bigger-line-height;
         overflow: $range-visibility-hidden;
       }
-      #{if(&, '&', '*')} .e-btn.e-apply {
+      & .e-btn.e-apply {
         margin: $range-bigger-footer-margin;
       }
     }
-    #{if(&, '&', '*')}.e-rtl.e-popup {
-      #{if(&, '&', '*')} .e-range-header .e-start-end {
-        #{if(&, '&', '*')} .e-end-btn {
+    &.e-rtl.e-popup {
+      & .e-range-header .e-start-end {
+        & .e-end-btn {
           border: $range-btn-border-value;
           border-radius: $range-btn-left-radius;
           border-right: $range-value-zero;
         }
-        #{if(&, '&', '*')} .e-start-btn {
+        & .e-start-btn {
           border-radius: $range-btn-right-radius;
         }
       }
-      #{if(&, '&', '*')} .e-footer {
-        #{if(&, '&', '*')}.e-btn.e-cancel {
+      & .e-footer {
+        &.e-btn.e-cancel {
           margin: $range-bigger-rtl-footer-margin;
         }
-        #{if(&, '&', '*')} .e-btn.e-apply {
+        & .e-btn.e-apply {
           margin-left: $range-value-zero;
         }
       }
     }
-    #{if(&, '&', '*')}.e-device {
-      #{if(&, '&', '*')}.e-popup {
+    &.e-device {
+      &.e-popup {
         max-width: $range-device-max-width;
 
-        #{if(&, '&', '*')} .e-range-header {
+        & .e-range-header {
           margin: $range-device-control-header-margin;
           padding: $range-device-control-header-padding;
 
-          #{if(&, '&', '*')} .e-day-span {
+          & .e-day-span {
             @if $skin-name == 'tailwind' {
               height: $range-device-indicator-height;
               line-height: $range-device-indicator-height;
@@ -257,8 +257,8 @@
   }
 
   .e-bigger #{&}.e-daterangepicker,
-  #{if(&, '&', '*')}.e-bigger#{&}.e-daterangepicker,
-  #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker {
+  *.e-bigger#{&}.e-daterangepicker,
+  *.e-device#{&}.e-daterangepicker {
     @if $skin-name == 'material' {
       background-color: initial;
     }
@@ -273,11 +273,11 @@
     }
     padding: $range-popup-padding;
 
-    #{if(&, '&', '*')} .e-calendar th {
+    & .e-calendar th {
       color: $range-calendar-light-color;
     }
-    #{if(&, '&', '*')} .e-start-btn,
-    #{if(&, '&', '*')} .e-end-btn {
+    & .e-start-btn,
+    & .e-end-btn {
       background: $range-bg-color;
       @if $skin-name == 'bootstrap4' {
         color: $range-button-font-color;
@@ -286,12 +286,12 @@
         color: $range-button-font-color;
       }
     }
-    #{if(&, '&', '*')} .e-start-btn.e-active,
-    #{if(&, '&', '*')} .e-start-btn.e-active:active,
-    #{if(&, '&', '*')} .e-end-btn.e-active,
-    #{if(&, '&', '*')} .e-end-btn.e-active:active:not([disabled]),
-    #{if(&, '&', '*')} .e-start-btn.e-active:hover,
-    #{if(&, '&', '*')} .e-end-btn.e-active:hover {
+    & .e-start-btn.e-active,
+    & .e-start-btn.e-active:active,
+    & .e-end-btn.e-active,
+    & .e-end-btn.e-active:active:not([disabled]),
+    & .e-start-btn.e-active:hover,
+    & .e-end-btn.e-active:hover {
       background: $range-primary-color;
       color: $range-primary-font-color;
     }
@@ -306,24 +306,24 @@
   }
 
   .e-bigger.e-small #{&}.e-daterangepicker {
-    #{if(&, '&', '*')}.e-popup {
+    &.e-popup {
       border: $range-popup-border;
       border-radius: $range-popup-border-radius;
       box-shadow: $range-box-shadow;
       max-height: $range-max-height;
       max-width: $range-max-width;
 
-      #{if(&, '&', '*')}.e-daterange-day-header-lg {
+      &.e-daterange-day-header-lg {
         max-width: $range-lg-day-header-format-width;
       }
-      #{if(&, '&', '*')}.e-preset-wrapper {
+      &.e-preset-wrapper {
         min-width: $range-preset-min-width;
 
-        #{if(&, '&', '*')} .e-presets {
+        & .e-presets {
           max-height: $range-value-none;
         }
       }
-      #{if(&, '&', '*')} .e-range-header {
+      & .e-range-header {
         background: $range-header-bg-color;
         padding: $range-control-header-margin;
         width: $range-control-header-width;
@@ -334,8 +334,8 @@
           border-top-left-radius: $range-popup-border-radius;
         }
 
-        #{if(&, '&', '*')} .e-start-label,
-        #{if(&, '&', '*')} .e-end-label {
+        & .e-start-label,
+        & .e-end-label {
           cursor: $range-cursor-default-style;
           display: $range-inline-block-style;
           font-size: $range-header-label-size;
@@ -350,13 +350,13 @@
             font-weight: $font-weight-medium;
           }
         }
-        #{if(&, '&', '*')} .e-change-icon {
+        & .e-change-icon {
           font-size: $range-font-size;
           font-weight: $range-font-weight-bold;
           text-align: $range-align-center;
           width: $range-change-icon-width;
         }
-        #{if(&, '&', '*')} .e-day-span {
+        & .e-day-span {
           direction: $range-direction-left;
           font-size: $range-calendar-small-font-size;
           height: $range-day-span-height;
@@ -365,19 +365,19 @@
           user-select: $range-browser-select-none;
           width: $range-indicator-label-width;
         }
-        #{if(&, '&', '*')} .e-start-end {
+        & .e-start-end {
           align-items: $range-align-center;
           display: $range-flex-style;
           height: $range-start-end-container-height;
         }
       }
-      #{if(&, '&', '*')} .e-separator {
+      & .e-separator {
         @if ($skin-name != 'FluentUI') {
           height: $range-separator-height;
           margin: $range-separator-margin;
         }
       }
-      #{if(&, '&', '*')} .e-calendar {
+      & .e-calendar {
         border: $range-calendar-border;
         margin: $range-calendar-margin;
         @if ($skin-name != 'FluentUI') {
@@ -387,13 +387,13 @@
           box-shadow: none;
         }
 
-        #{if(&, '&', '*')} .e-content table {
+        & .e-content table {
           @if ($skin-name != 'FluentUI') {
             padding: $range-calendar-normal-table-padding;
           }
         }
-        #{if(&, '&', '*')} .e-header {
-          #{if(&, '&', '*')} .e-title {
+        & .e-header {
+          & .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
             @if ($skin-name != 'FluentUI') {
@@ -403,55 +403,55 @@
               margin-left: $range-value-zero;
             }
           }
-          #{if(&, '&', '*')}.e-month,
-          #{if(&, '&', '*')}.e-year,
-          #{if(&, '&', '*')}.e-decade {
+          &.e-month,
+          &.e-year,
+          &.e-decade {
             @if ($skin-name != 'FluentUI') {
               padding: $range-calendar-header-padding;
             }
           }
-          #{if(&, '&', '*')} .e-next {
+          & .e-next {
             @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
               float: $range-float-right;
             }
           }
-          #{if(&, '&', '*')} .e-prev {
+          & .e-prev {
             @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
               float: $range-float-left;
             }
           }
-          #{if(&, '&', '*')} .e-next,
-          #{if(&, '&', '*')} .e-prev {
+          & .e-next,
+          & .e-prev {
             height: $range-normal-nav-icon-height;
             width: $range-normal-nav-icon-width;
           }
-          #{if(&, '&', '*')} .e-next span,
-          #{if(&, '&', '*')} .e-prev span {
+          & .e-next span,
+          & .e-prev span {
             padding: $range-icon-normal-padding;
           }
         }
-        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
+        & .e-start-date.e-selected.e-range-hover {
           border-radius: $range-hover-start-radius;
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
+        & .e-end-date.e-selected.e-range-hover {
           border-radius: $range-hover-end-radius;
         }
-        #{if(&, '&', '*')} .e-start-date.e-selected {
+        & .e-start-date.e-selected {
           @if ($skin-name == 'FluentUI') {
             border-radius: $range-hover-start-radius;
           }
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected {
+        & .e-end-date.e-selected {
           @if ($skin-name == 'FluentUI') {
             border-radius: $range-hover-end-radius;
           }
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
-        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
+        & .e-end-date.e-selected.e-range-hover span.e-day,
+        & .e-start-date.e-selected.e-range-hover span.e-day {
           border: $range-calendar-hover-border;
         }
       }
-      #{if(&, '&', '*')} .e-footer {
+      & .e-footer {
         align-items: $range-align-center;
         @if ($skin-name != 'FluentUI') {
           border-top: $range-border-value;
@@ -464,7 +464,7 @@
           border-radius: $range-popup-footer-border-radius;
         }
       }
-      #{if(&, '&', '*')} .e-footer .e-btn {
+      & .e-footer .e-btn {
         font-weight: $range-btn-font-weight;
         height: $range-btn-normal-height;
         line-height: $range-btn-normal-line-height;
@@ -475,24 +475,24 @@
           border: $footer-btn-border;
         }
       }
-      #{if(&, '&', '*')} .e-footer .e-btn.e-apply {
+      & .e-footer .e-btn.e-apply {
         margin: $range-normal-footer-margin;
       }
-      #{if(&, '&', '*')} .e-date-range-container {
+      & .e-date-range-container {
         float: $range-float-left;
 
-        #{if(&, '&', '*')}.e-range-border {
+        &.e-range-border {
           border-right: $range-border-value;
         }
       }
-      #{if(&, '&', '*')} .e-calendar-container {
+      & .e-calendar-container {
         display: $range-flex-style;
 
-        #{if(&, '&', '*')} .e-left-container,
-        #{if(&, '&', '*')} .e-right-container {
+        & .e-left-container,
+        & .e-right-container {
           float: $range-float-left;
         }
-        #{if(&, '&', '*')} .e-left-container {
+        & .e-left-container {
           @if $skin-name != 'FluentUI' {
             border-right: $range-border-value;
           }
@@ -501,12 +501,12 @@
           }
         }
       }
-      #{if(&, '&', '*')} .e-presets {
+      & .e-presets {
         max-height: $range-presets-height;
         overflow: auto;
         width: $range-width-auto;
 
-        #{if(&, '&', '*')} .e-list-item {
+        & .e-list-item {
           border-radius: $range-list-border-radius;
           cursor: $range-cursor-pointer-style;
           line-height: $range-list-item-height;
@@ -515,17 +515,17 @@
           white-space: $range-text-nowrap;
           text-overflow: $range-text-overflow;
         }
-        #{if(&, '&', '*')} .e-list-parent {
+        & .e-list-parent {
           margin: $range-value-zero;
           max-width: $range-presets-width;
           padding: $range-value-zero;
         }
-        #{if(&, '&', '*')} .e-text-content {
+        & .e-text-content {
           line-height: $range-list-item-line-height;
         }
-        #{if(&, '&', '*')} .e-ul {
+        & .e-ul {
 
-          #{if(&, '&', '*')} li.e-list-item {
+          & li.e-list-item {
             font-size: $range-presets-normal-list-font-size;
             height: $range-preset-normal-list-height;
             line-height: $range-preset-normal-list-height;
@@ -538,19 +538,19 @@
           }
         }
       }
-      #{if(&, '&', '*')} .e-hide-range {
+      & .e-hide-range {
         display: $range-display-none;
       }
     }
-    #{if(&, '&', '*')}.e-rtl {
-      #{if(&, '&', '*')} .e-date-range-container {
+    &.e-rtl {
+      & .e-date-range-container {
         float: $range-float-right;
 
-        #{if(&, '&', '*')}.e-range-border {
+        &.e-range-border {
           border-left: $range-border-value;
           border-right: $range-value-zero;
         }
-        #{if(&, '&', '*')} .e-left-container {
+        & .e-left-container {
           @if $skin-name != 'FluentUI' {
             border-left: $range-border-value;
             border-right: $range-value-zero;
@@ -559,22 +559,22 @@
             border-left: $range-container-border-value;
           }
         }
-        #{if(&, '&', '*')} .e-calendar {
-          #{if(&, '&', '*')} .e-next {
+        & .e-calendar {
+          & .e-next {
             float: $range-float-left;
           }
-          #{if(&, '&', '*')} .e-prev {
+          & .e-prev {
             @if ($skin-name != 'FluentUI') {
               float: $range-float-right;
             }
           }
-          #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
+          & .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;
             @if ($skin-name == 'FluentUI') {
               box-shadow: $selected-range-box-shadow;
             }
           }
-          #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
+          & .e-end-date.e-selected.e-range-hover {
             border-radius: $range-hover-start-radius;
             @if ($skin-name == 'FluentUI') {
               box-shadow: $selected-range-box-shadow;
@@ -582,14 +582,14 @@
           }
         }
       }
-      #{if(&, '&', '*')} .e-footer {
+      & .e-footer {
         flex-direction: $range-flex-direction-row;
         justify-content: $range-flex-justify-content;
 
-        #{if(&, '&', '*')} .e-btn.e-cancel {
+        & .e-btn.e-cancel {
           margin: $range-normal-rtl-footer-margin;
         }
-        #{if(&, '&', '*')} .e-btn.e-apply {
+        & .e-btn.e-apply {
           margin-left: $range-value-zero;
         }
       }
@@ -602,10 +602,10 @@
 
   .e-bigger.e-small #{&}.e-daterangepicker,
   .e-bigger.e-small#{&}.e-daterangepicker {
-    #{if(&, '&', '*')}.e-popup {
+    &.e-popup {
       background: $range-background;
 
-      #{if(&, '&', '*')} .e-calendar {
+      & .e-calendar {
         @if $skin-name != 'Material3' {
           background-color: $range-background;
         }
@@ -613,15 +613,15 @@
           background: $range-background;
         }
 
-        #{if(&, '&', '*')} .e-header .e-title,
-        #{if(&, '&', '*')} .e-header .e-title:hover {
+        & .e-header .e-title,
+        & .e-header .e-title:hover {
           color: $range-calendar-header-dark-color;
           text-decoration: none;
           @if $skin-name == 'fluent2' {
             width: $title-hover-width;
           }
         }
-        #{if(&, '&', '*')} .e-content .e-range-hover {
+        & .e-content .e-range-hover {
           @if $skin-name != 'Material3' {
             background-color: $range-hover-color;
           }
@@ -630,14 +630,14 @@
           }
           color: $range-calendar-dark-color;
         }
-        #{if(&, '&', '*')} .e-content .e-start-date.e-selected,
-        #{if(&, '&', '*')} .e-content .e-end-date.e-selected {
+        & .e-content .e-start-date.e-selected,
+        & .e-content .e-end-date.e-selected {
           @if $skin-name == 'FluentUI' {
             background-color: $range-hover-color;
             color: $range-calendar-dark-color;
           }
         }
-        #{if(&, '&', '*')} .e-content.e-month .e-today.e-range-hover span {
+        & .e-content.e-month .e-today.e-range-hover span {
           @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
             background-color: $range-today-color;
             border: $range-today-border-color;
@@ -652,7 +652,7 @@
             box-shadow: $range-today-hover-box-shadow;
           }
         }
-        #{if(&, '&', '*')} .e-content .e-range-hover span {
+        & .e-content .e-range-hover span {
           @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
             background: $range-hover-color;
             border: $range-calendar-selection-border;
@@ -665,16 +665,16 @@
           }
         }
 
-        #{if(&, '&', '*')} .e-content .e-range-hover:not(.e-other-month) span {
+        & .e-content .e-range-hover:not(.e-other-month) span {
           @if $skin-name == 'tailwind' {
             background: $range-hover-color;
             border: $range-calendar-selection-border;
             color: $range-calendar-dark-color;
           }
         }
-        #{if(&, '&', '*')} .e-range-hover:not(.e-selected):hover span.e-day,
-        #{if(&, '&', '*')} .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
-        #{if(&, '&', '*')} .e-range-hover.e-focused-date.e-today span.e-day {
+        & .e-range-hover:not(.e-selected):hover span.e-day,
+        & .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
+        & .e-range-hover.e-focused-date.e-today span.e-day {
           @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
             background-color: $range-hover-content-color;
             border: $range-calendar-hover-border-color;
@@ -686,25 +686,25 @@
             color: $range-calendar-dark-color;
           }
         }
-        #{if(&, '&', '*')} .e-range-hover.e-today:hover span.e-day,
-        #{if(&, '&', '*')} .e-range-hover.e-focused-date.e-today span.e-day,
-        #{if(&, '&', '*')} .e-range-hover.e-start-date.e-selected.e-today span.e-day,
-        #{if(&, '&', '*')} .e-range-hover.e-end-date.e-selected.e-today span.e-day {
+        & .e-range-hover.e-today:hover span.e-day,
+        & .e-range-hover.e-focused-date.e-today span.e-day,
+        & .e-range-hover.e-start-date.e-selected.e-today span.e-day,
+        & .e-range-hover.e-end-date.e-selected.e-today span.e-day {
           @if $skin-name != 'tailwind' {
             border: $range-calendar-active-border;
           }
         }
-        #{if(&, '&', '*')} .e-range-hover.e-selected.e-today:hover span.e-day {
+        & .e-range-hover.e-selected.e-today:hover span.e-day {
           @if $skin-name != 'tailwind' {
             border: $range-calendar-today-start-color;
           }
         }
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-today.e-range-hover span,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover span,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover:hover span.e-day,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-selected,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-selected span {
+        & .e-content .e-other-month.e-range-hover,
+        & .e-content .e-other-month.e-today.e-range-hover span,
+        & .e-content .e-other-month.e-range-hover span,
+        & .e-content .e-other-month.e-range-hover:hover span.e-day,
+        & .e-content .e-other-month.e-selected,
+        & .e-content .e-other-month.e-selected span {
           @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
             background-color: $range-other-hover-color;
             border: $range-calendar-other-month-border;
@@ -716,18 +716,18 @@
             color: $range-other-month-date;
           }
         }
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-today.e-range-hover span,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover span,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover:hover span.e-day {
+        & .e-content .e-other-month.e-range-hover,
+        & .e-content .e-other-month.e-today.e-range-hover span,
+        & .e-content .e-other-month.e-range-hover span,
+        & .e-content .e-other-month.e-range-hover:hover span.e-day {
           @if $skin-name == 'tailwind' {
             background-color: $range-other-hover-color;
             border: $range-calendar-other-month-border;
             color: $range-other-month-date;
           }
         }
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
-        #{if(&, '&', '*')} .e-content .e-other-month.e-selected {
+        & .e-content .e-other-month.e-range-hover,
+        & .e-content .e-other-month.e-selected {
           @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
             background-color: $range-other-hover-color;
             border: $range-calendar-other-normal-border;
@@ -739,15 +739,15 @@
             color: $range-other-month-date;
           }
         }
-        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover {
+        & .e-content .e-other-month.e-range-hover {
           @if $skin-name == 'tailwind' {
             background-color: $range-other-hover-color;
             border: $range-calendar-other-normal-border;
             color: $range-other-month-date;
           }
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
-        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
+        & .e-end-date.e-selected.e-range-hover span.e-day,
+        & .e-start-date.e-selected.e-range-hover span.e-day {
           @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
             background-color: $range-selection-bg;
           }
@@ -764,8 +764,8 @@
             box-shadow: $range-value-none;
           }
         }
-        #{if(&, '&', '*')} .e-start-date.e-selected span.e-day,
-        #{if(&, '&', '*')} .e-end-date.e-selected span.e-day {
+        & .e-start-date.e-selected span.e-day,
+        & .e-end-date.e-selected span.e-day {
           @if ($skin-name == 'FluentUI') {
             background-color: $range-selection-bg;
             border-radius: $range-selected-hover-radius;
@@ -778,14 +778,14 @@
             color: $range-active-font-color;
           }
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
-        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover.e-other-month span.e-day {
+        & .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
+        & .e-start-date.e-selected.e-range-hover.e-other-month span.e-day {
           @if ($skin-name == 'tailwind') {
             background-color: $range-selection-bg;
             color: $range-active-font-color;
           }
         }
-        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover.e-today span.e-day {
+        & .e-start-date.e-selected.e-range-hover.e-today span.e-day {
           @if $skin-name != 'Material3' {
             background-color: $range-selection-bg;
           }
@@ -794,11 +794,11 @@
           }
           color: $range-active-font-color;
         }
-        #{if(&, '&', '*')} .e-other-month.e-selected span {
+        & .e-other-month.e-selected span {
           color: $range-primary-font-color;
         }
       }
-      #{if(&, '&', '*')} .e-presets {
+      & .e-presets {
         @if $skin-name != 'Material3' {
           background-color: $range-presets-bg;
         }
@@ -807,7 +807,7 @@
         }
         color: $range-preset-normal-font-color;
 
-        #{if(&, '&', '*')} .e-list-item.e-active {
+        & .e-list-item.e-active {
           @if $skin-name != 'Material3' {
             background-color: $range-presets-bg-color;
           }
@@ -816,7 +816,7 @@
           }
           color: $range-presets-font-color;
         }
-        #{if(&, '&', '*')} .e-list-item.e-hover {
+        & .e-list-item.e-hover {
           @if $skin-name != 'Material3' {
             background-color: $range-presets-hover-bg;
           }
@@ -826,17 +826,17 @@
           color: $range-list-hover-color;
         }
       }
-      #{if(&, '&', '*')} .e-start-label,
-      #{if(&, '&', '*')} .e-end-label {
+      & .e-start-label,
+      & .e-end-label {
         color: $range-calendar-header-text-color;
       }
-      #{if(&, '&', '*')} .e-change-icon {
+      & .e-change-icon {
         color: $range-change-icon-color;
       }
-      #{if(&, '&', '*')} .e-day-span {
+      & .e-day-span {
         color: $range-calendar-medium-color;
       }
-      #{if(&, '&', '*')} .e-separator {
+      & .e-separator {
         @if $skin-name != 'Material3' {
           background-color: $range-separator-color;
         }
@@ -847,7 +847,7 @@
           display: none;
         }
       }
-      #{if(&, '&', '*')} .e-footer {
+      & .e-footer {
         @if $skin-name != 'Material3' {
           background-color: $range-footer-background;
         }
@@ -857,7 +857,7 @@
           border-bottom-right-radius: $range-popup-border-radius;
         }
 
-        #{if(&, '&', '*')} .e-cancel.e-flat:not(:hover) {
+        & .e-cancel.e-flat:not(:hover) {
           @if $skin-name == 'tailwind' {
             /* stylelint-disable property-no-vendor-prefix */
             -webkit-tap-highlight-color: transparent;
@@ -868,7 +868,7 @@
           }
         }
 
-        #{if(&, '&', '*')} .e-apply.e-flat.e-primary:not(:hover):not(:disabled) {
+        & .e-apply.e-flat.e-primary:not(:hover):not(:disabled) {
           @if $skin-name == 'tailwind' {
             -webkit-tap-highlight-color: transparent;
             background-color: $range-apply-btn-primary-bgcolor;
@@ -894,9 +894,9 @@
   }
 
   .e-bigger {
-    #{if(&, '&', '*')} .e-input-group-icon.e-range-icon,
-    #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon,
-    #{if(&, '&', '*')} .e-control-wrapper .e-input-group-icon.e-range-icon {
+    & .e-input-group-icon.e-range-icon,
+    &.e-control-wrapper .e-input-group-icon.e-range-icon,
+    & .e-control-wrapper .e-input-group-icon.e-range-icon {
       @if $skin-name == 'tailwind' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'material-dark' or $skin-name == 'material' or $skin-name == 'tailwind3' {
         font-size: $range-bigger-icon-font-size;
         margin: $range-icon-bigger-margin;
@@ -924,8 +924,8 @@
   }
 
   .e-small.e-bigger .e-input-group-icon.e-range-icon,
-  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-range-icon,
-  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
+  *.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-range-icon,
+  *.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
     font-size: $range-bigger-small-icon-font-size;
     @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
       min-width: $range-bigger-small-icon-container-min-width;