@syncfusion/blazor-themes 31.1.23 → 31.2.2

package/SCSS-Themes/grids/grid/tailwind3-dark-lite.scss

@@ -4951,7 +4951,7 @@ $grid-checkmark-color: $primary-text-color !default;
       line-height: normal;
     }
   }
-  .e-grid.sf-grid.e-grid-min-height .e-virtualtable {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
     /* stylelint-disable declaration-no-important */
     .e-table {
       border-spacing: 0 !important;
@@ -4965,6 +4965,19 @@ $grid-checkmark-color: $primary-text-color !default;
 }
 /* stylelint-enable function-url-quotes */
 
+/* Apply styles for Safari on macOS desktop and other Apple devices */
+/* stylelint-disable function-url-quotes */
+@supports (font: -apple-system-body) {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
+
+    /* stylelint-disable declaration-no-important */
+    .e-table {
+      border-spacing: 0 !important;
+    }
+  }
+}
+/* stylelint-enable function-url-quotes */
+
 
 @mixin background-color-styles($grid-skin, $bg, $bgcolor) {
   @if $grid-skin == 'material3' {

package/SCSS-Themes/grids/grid/tailwind3-dark.scss

@@ -4951,7 +4951,7 @@ $grid-checkmark-color: $primary-text-color !default;
       line-height: normal;
     }
   }
-  .e-grid.sf-grid.e-grid-min-height .e-virtualtable {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
     /* stylelint-disable declaration-no-important */
     .e-table {
       border-spacing: 0 !important;
@@ -4965,6 +4965,19 @@ $grid-checkmark-color: $primary-text-color !default;
 }
 /* stylelint-enable function-url-quotes */
 
+/* Apply styles for Safari on macOS desktop and other Apple devices */
+/* stylelint-disable function-url-quotes */
+@supports (font: -apple-system-body) {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
+
+    /* stylelint-disable declaration-no-important */
+    .e-table {
+      border-spacing: 0 !important;
+    }
+  }
+}
+/* stylelint-enable function-url-quotes */
+
 
 @mixin background-color-styles($grid-skin, $bg, $bgcolor) {
   @if $grid-skin == 'material3' {

package/SCSS-Themes/grids/grid/tailwind3-lite.scss

@@ -4951,7 +4951,7 @@ $grid-checkmark-color: $primary-text-color !default;
       line-height: normal;
     }
   }
-  .e-grid.sf-grid.e-grid-min-height .e-virtualtable {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
     /* stylelint-disable declaration-no-important */
     .e-table {
       border-spacing: 0 !important;
@@ -4965,6 +4965,19 @@ $grid-checkmark-color: $primary-text-color !default;
 }
 /* stylelint-enable function-url-quotes */
 
+/* Apply styles for Safari on macOS desktop and other Apple devices */
+/* stylelint-disable function-url-quotes */
+@supports (font: -apple-system-body) {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
+
+    /* stylelint-disable declaration-no-important */
+    .e-table {
+      border-spacing: 0 !important;
+    }
+  }
+}
+/* stylelint-enable function-url-quotes */
+
 
 @mixin background-color-styles($grid-skin, $bg, $bgcolor) {
   @if $grid-skin == 'material3' {

package/SCSS-Themes/grids/grid/tailwind3.scss

@@ -4951,7 +4951,7 @@ $grid-checkmark-color: $primary-text-color !default;
       line-height: normal;
     }
   }
-  .e-grid.sf-grid.e-grid-min-height .e-virtualtable {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
     /* stylelint-disable declaration-no-important */
     .e-table {
       border-spacing: 0 !important;
@@ -4965,6 +4965,19 @@ $grid-checkmark-color: $primary-text-color !default;
 }
 /* stylelint-enable function-url-quotes */
 
+/* Apply styles for Safari on macOS desktop and other Apple devices */
+/* stylelint-disable function-url-quotes */
+@supports (font: -apple-system-body) {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
+
+    /* stylelint-disable declaration-no-important */
+    .e-table {
+      border-spacing: 0 !important;
+    }
+  }
+}
+/* stylelint-enable function-url-quotes */
+
 
 @mixin background-color-styles($grid-skin, $bg, $bgcolor) {
   @if $grid-skin == 'material3' {

package/SCSS-Themes/highcontrast-lite.scss

@@ -66074,7 +66074,7 @@ $grid-checkmark-color: $selection-font !default;
       line-height: normal;
     }
   }
-  .e-grid.sf-grid.e-grid-min-height .e-virtualtable {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
     /* stylelint-disable declaration-no-important */
     .e-table {
       border-spacing: 0 !important;
@@ -66088,6 +66088,19 @@ $grid-checkmark-color: $selection-font !default;
 }
 /* stylelint-enable function-url-quotes */
 
+/* Apply styles for Safari on macOS desktop and other Apple devices */
+/* stylelint-disable function-url-quotes */
+@supports (font: -apple-system-body) {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
+
+    /* stylelint-disable declaration-no-important */
+    .e-table {
+      border-spacing: 0 !important;
+    }
+  }
+}
+/* stylelint-enable function-url-quotes */
+
 
 @mixin background-color-styles($grid-skin, $bg, $bgcolor) {
   @if $grid-skin == 'material3' {
@@ -111395,7 +111408,7 @@ $timeline-item-disabled-color: $selection-bg !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -111403,7 +111416,7 @@ $timeline-item-disabled-color: $selection-bg !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/highcontrast.scss

@@ -88479,7 +88479,7 @@ $grid-checkmark-color: $selection-font !default;
       line-height: normal;
     }
   }
-  .e-grid.sf-grid.e-grid-min-height .e-virtualtable {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
     /* stylelint-disable declaration-no-important */
     .e-table {
       border-spacing: 0 !important;
@@ -88493,6 +88493,19 @@ $grid-checkmark-color: $selection-font !default;
 }
 /* stylelint-enable function-url-quotes */
 
+/* Apply styles for Safari on macOS desktop and other Apple devices */
+/* stylelint-disable function-url-quotes */
+@supports (font: -apple-system-body) {
+  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
+
+    /* stylelint-disable declaration-no-important */
+    .e-table {
+      border-spacing: 0 !important;
+    }
+  }
+}
+/* stylelint-enable function-url-quotes */
+
 
 @mixin background-color-styles($grid-skin, $bg, $bgcolor) {
   @if $grid-skin == 'material3' {
@@ -144394,7 +144407,7 @@ $timeline-item-disabled-color: $selection-bg !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -144402,7 +144415,7 @@ $timeline-item-disabled-color: $selection-bg !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -144709,7 +144722,7 @@ $timeline-item-disabled-color: $selection-bg !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bds-dark-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bds-dark.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bds-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bds.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bootstrap-dark-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $grey-lighter !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $grey-lighter !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bootstrap-dark.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $grey-lighter !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $grey-lighter !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $grey-lighter !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bootstrap-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $grey-ad !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $grey-ad !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bootstrap.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $grey-ad !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $grey-ad !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $grey-ad !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bootstrap4-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $gray-500 !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $gray-500 !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bootstrap4.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $gray-500 !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $gray-500 !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $gray-500 !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bootstrap5-dark-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bootstrap5-dark.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bootstrap5-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bootstrap5.3-dark-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bootstrap5.3-dark.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bootstrap5.3-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);

package/SCSS-Themes/layouts/timeline/bootstrap5.3.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/bootstrap5.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);
@@ -344,7 +344,7 @@ $timeline-item-disabled-color: $content-text-color-disabled !default;
 @include export-module('timeline-bigger') {
   .e-bigger.e-timeline,
   .e-bigger .e-timeline {
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-bigger-dot-icon-size;
       min-height: $timeline-bigger-dot-icon-size;
       font-size: $timeline-bigger-dot-font-size;

package/SCSS-Themes/layouts/timeline/fabric-dark-lite.scss

@@ -29,7 +29,7 @@ $timeline-item-disabled-color: $neutral-tertiary-alt !default;
     height: inherit;
     width: 100%;
 
-    [class ^= 'e-dot ']::before,
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
     .e-dot-item,
     .e-dot {
       display: flex;
@@ -37,7 +37,7 @@ $timeline-item-disabled-color: $neutral-tertiary-alt !default;
       justify-content: center;
     }
 
-    [class ^= 'e-dot ']::before {
+    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
       min-width: $timeline-dot-icon-size;
       min-height: $timeline-dot-icon-size;
       border-radius: var(--dot-radius);