@syncfusion/ej2-splitbuttons 33.2.3 → 34.1.29

package/styles/progress-button/_theme.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
+@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;
 
 @include export-module('progress-button-theme') {
 
@@ -19,44 +20,47 @@
       }
 
       .e-path-arc {
-        stroke: $btn-color;
+        stroke: btn.$btn-color;
         @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
           stroke-width: 3px;
         }
       }
     }
 
-    #{if(&, '&', '*')}.e-primary,
-    #{if(&, '&', '*')}.e-primary.e-outline:hover,
-    #{if(&, '&', '*')}.e-primary.e-outline:focus,
-    #{if(&, '&', '*')}.e-primary.e-flat:hover,
-    #{if(&, '&', '*')}.e-primary.e-flat:focus {
+    &.e-primary,
+    &.e-primary.e-outline:hover,
+    &.e-primary.e-outline:focus,
+    &.e-primary.e-flat:hover,
+    &.e-primary.e-flat:focus {
       .e-spinner-pane .e-spinner-inner svg {
-        fill: $btn-primary-color;
-        stroke: $btn-primary-color;
+        fill: btn.$btn-primary-color;
+        stroke: btn.$btn-primary-color;
 
         .e-path-circle {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: color.adjust($btn-primary-color, $alpha: -$progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            stroke: color.adjust(btn.$btn-primary-color, $alpha: -$progress-btn-circle-opacity);
+          }
+          @else if $skin-name == 'tailwind' {
+            stroke: color.adjust($progress-btn-primary-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
         .e-path-arc {
-          stroke: $btn-primary-color;
+          stroke: btn.$btn-primary-color;
         }
       }
 
       &.e-flat {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-flat-primary-color;
-          stroke: $btn-flat-primary-color;
+          fill: btn.$btn-flat-primary-color;
+          stroke: btn.$btn-flat-primary-color;
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
               stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap'{
-              stroke: color.adjust($btn-flat-primary-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-flat-primary-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -65,57 +69,60 @@
               stroke: $btn-flat-primary-path-arc;
             }
             @else {
-              stroke: $btn-flat-primary-color;
+              stroke: btn.$btn-flat-primary-color;
             }
           }
         }
       }
     }
 
-    #{if(&, '&', '*')}.e-primary.e-outline:hover,
-    #{if(&, '&', '*')}.e-primary.e-outline:focus {
+    &.e-primary.e-outline:hover,
+    &.e-primary.e-outline:focus {
       @if $skin-name == 'Material3' {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-primary-bgcolor;
-          stroke: $btn-primary-bgcolor;
+          fill: btn.$btn-primary-bgcolor;
+          stroke: btn.$btn-primary-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-primary-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-primary-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-primary-color;
+            stroke: btn.$btn-primary-color;
           }
         }
       }
     }
 
-    #{if(&, '&', '*')}.e-success,
-    #{if(&, '&', '*')}.e-success.e-outline:hover,
-    #{if(&, '&', '*')}.e-success.e-outline:focus,
-    #{if(&, '&', '*')}.e-success.e-flat:hover,
-    #{if(&, '&', '*')}.e-success.e-flat:focus {
+    &.e-success,
+    &.e-success.e-outline:hover,
+    &.e-success.e-outline:focus,
+    &.e-success.e-flat:hover,
+    &.e-success.e-flat:focus {
       .e-spinner-pane .e-spinner-inner svg {
-        fill: $btn-success-color;
-        stroke: $btn-success-color;
+        fill: btn.$btn-success-color;
+        stroke: btn.$btn-success-color;
 
         .e-path-circle {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: color.adjust($btn-success-color, $alpha: -$progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            stroke: color.adjust(btn.$btn-success-color, $alpha: -$progress-btn-circle-opacity);
+          }
+          @else if $skin-name == 'tailwind' {
+            stroke: color.adjust($progress-btn-success-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
         .e-path-arc {
-          stroke: $btn-success-color;
+          stroke: btn.$btn-success-color;
         }
       }
 
       &.e-flat {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-flat-success-color;
-          stroke: $btn-flat-success-color;
+          fill: btn.$btn-flat-success-color;
+          stroke: btn.$btn-flat-success-color;
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
@@ -123,7 +130,7 @@
             }
             @else {
               @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-                stroke: color.adjust($btn-flat-success-color, $alpha: -$progress-btn-circle-opacity);
+                stroke: color.adjust(btn.$btn-flat-success-color, $alpha: -$progress-btn-circle-opacity);
               }
             }
           }
@@ -133,28 +140,28 @@
               stroke: $btn-flat-primary-path-arc;
             }
             @else {
-              stroke: $btn-flat-success-color;
+              stroke: btn.$btn-flat-success-color;
             }
           }
         }
       }
     }
 
-    #{if(&, '&', '*')}.e-success.e-outline:hover,
-    #{if(&, '&', '*')}.e-success.e-outline:focus {
+    &.e-success.e-outline:hover,
+    &.e-success.e-outline:focus {
       @if $skin-name == 'Material3' {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-success-bgcolor;
-          stroke: $btn-success-bgcolor;
+          fill: btn.$btn-success-bgcolor;
+          stroke: btn.$btn-success-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-success-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-success-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-success-color;
+            stroke: btn.$btn-success-color;
           }
         }
       }
@@ -166,12 +173,15 @@
     &.e-info.e-flat:hover,
     &.e-info.e-flat:focus {
       .e-spinner-pane .e-spinner-inner svg {
-        fill: $btn-info-color;
-        stroke: $btn-info-color;
+        fill: btn.$btn-info-color;
+        stroke: btn.$btn-info-color;
 
         .e-path-circle {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: color.adjust($btn-info-color, $alpha: -$progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            stroke: color.adjust(btn.$btn-info-color, $alpha: -$progress-btn-circle-opacity);
+          }
+          @else if $skin-name == 'tailwind' {
+            stroke: color.adjust($progress-btn-info-color, $alpha: -$progress-btn-circle-opacity);
           }
           @if $skin-name == 'fluent2' {
             stroke: color.adjust(#242424, $alpha: -$progress-btn-circle-opacity);
@@ -179,21 +189,21 @@
         }
 
         .e-path-arc {
-          stroke: $btn-info-color;
+          stroke: btn.$btn-info-color;
         }
       }
 
       &.e-flat {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-flat-info-color;
-          stroke: $btn-flat-info-color;
+          fill: btn.$btn-flat-info-color;
+          stroke: btn.$btn-flat-info-color;
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
               stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-flat-info-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-flat-info-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -202,28 +212,28 @@
               stroke: $btn-flat-primary-path-arc;
             }
             @else {
-              stroke: $btn-flat-info-color;
+              stroke: btn.$btn-flat-info-color;
             }
           }
         }
       }
     }
 
-    #{if(&, '&', '*')}.e-info.e-outline:hover,
-    #{if(&, '&', '*')}.e-info.e-outline:focus {
+    &.e-info.e-outline:hover,
+    &.e-info.e-outline:focus {
       @if $skin-name == 'Material3' {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-info-bgcolor;
-          stroke: $btn-info-bgcolor;
+          fill: btn.$btn-info-bgcolor;
+          stroke: btn.$btn-info-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-info-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-info-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-info-color;
+            stroke: btn.$btn-info-color;
           }
         }
       }
@@ -235,31 +245,34 @@
     &.e-warning.e-flat:hover,
     &.e-warning.e-flat:focus {
       .e-spinner-pane .e-spinner-inner svg {
-        fill: $btn-warning-color;
-        stroke: $btn-warning-color;
+        fill: btn.$btn-warning-color;
+        stroke: btn.$btn-warning-color;
 
         .e-path-circle {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: color.adjust($btn-warning-color, $alpha: -$progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            stroke: color.adjust(btn.$btn-warning-color, $alpha: -$progress-btn-circle-opacity);
+          }
+          @else if $skin-name == 'tailwind' {
+            stroke: color.adjust($progress-btn-warning-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
         .e-path-arc {
-          stroke: $btn-warning-color;
+          stroke: btn.$btn-warning-color;
         }
       }
 
       &.e-flat {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-flat-warning-color;
-          stroke: $btn-flat-warning-color;
+          fill: btn.$btn-flat-warning-color;
+          stroke: btn.$btn-flat-warning-color;
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
               stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else {
-              stroke: $btn-flat-warning-color;
+              stroke: btn.$btn-flat-warning-color;
             }
           }
 
@@ -268,28 +281,28 @@
               stroke: $btn-flat-primary-path-arc;
             }
             @else {
-              stroke: $btn-flat-warning-color;
+              stroke: btn.$btn-flat-warning-color;
             }
           }
         }
       }
     }
 
-    #{if(&, '&', '*')}.e-warning.e-outline:hover,
-    #{if(&, '&', '*')}.e-warning.e-outline:focus {
+    &.e-warning.e-outline:hover,
+    &.e-warning.e-outline:focus {
       @if $skin-name == 'Material3' {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-warning-bgcolor;
-          stroke: $btn-warning-bgcolor;
+          fill: btn.$btn-warning-bgcolor;
+          stroke: btn.$btn-warning-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-warning-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-warning-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-warning-color;
+            stroke: btn.$btn-warning-color;
           }
         }
       }
@@ -301,31 +314,34 @@
     &.e-danger.e-flat:hover,
     &.e-danger.e-flat:focus {
       .e-spinner-pane .e-spinner-inner svg {
-        fill: $btn-danger-color;
-        stroke: $btn-danger-color;
+        fill: btn.$btn-danger-color;
+        stroke: btn.$btn-danger-color;
 
         .e-path-circle {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: color.adjust($btn-danger-color, $alpha: -$progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            stroke: color.adjust(btn.$btn-danger-color, $alpha: -$progress-btn-circle-opacity);
+          }
+          @else if $skin-name == 'tailwind' {
+            stroke: color.adjust($progress-btn-danger-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
         .e-path-arc {
-          stroke: $btn-danger-color;
+          stroke: btn.$btn-danger-color;
         }
       }
 
       &.e-flat {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-flat-danger-color;
-          stroke: $btn-flat-danger-color;
+          fill: btn.$btn-flat-danger-color;
+          stroke: btn.$btn-flat-danger-color;
 
           .e-path-circle {
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
               stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
             }
             @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-flat-danger-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-flat-danger-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
@@ -334,28 +350,28 @@
               stroke: $btn-flat-primary-path-arc;
             }
             @else {
-              stroke: $btn-flat-danger-color;
+              stroke: btn.$btn-flat-danger-color;
             }
           }
         }
       }
     }
 
-    #{if(&, '&', '*')}.e-danger.e-outline:hover,
-    #{if(&, '&', '*')}.e-danger.e-outline:focus {
+    &.e-danger.e-outline:hover,
+    &.e-danger.e-outline:focus {
       @if $skin-name == 'Material3' {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-danger-bgcolor;
-          stroke: $btn-danger-bgcolor;
+          fill: btn.$btn-danger-bgcolor;
+          stroke: btn.$btn-danger-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-danger-color, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-danger-color, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-danger-color;
+            stroke: btn.$btn-danger-color;
           }
         }
       }
@@ -365,84 +381,90 @@
     &.e-flat {
       &.e-primary {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-primary-bgcolor;
-          stroke: $btn-primary-bgcolor;
+          fill: btn.$btn-primary-bgcolor;
+          stroke: btn.$btn-primary-bgcolor;
 
           .e-path-circle {
-            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-primary-bgcolor, $alpha: -$progress-btn-circle-opacity);
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+              stroke: color.adjust(btn.$btn-primary-bgcolor, $alpha: -$progress-btn-circle-opacity);
+            }
+            @else if $skin-name == 'tailwind' {
+              stroke: color.adjust($progress-btn-primary-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-primary-bgcolor;
+            stroke: btn.$btn-primary-bgcolor;
           }
         }
       }
 
       &.e-success {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-success-bgcolor;
-          stroke: $btn-success-bgcolor;
+          fill: btn.$btn-success-bgcolor;
+          stroke: btn.$btn-success-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-success-bgcolor, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-success-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
           .e-path-arc {
-            stroke: $btn-success-bgcolor;
+            stroke: btn.$btn-success-bgcolor;
           }
         }
       }
 
       &.e-info {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-info-bgcolor;
-          stroke: $btn-info-bgcolor;
+          fill: btn.$btn-info-bgcolor;
+          stroke: btn.$btn-info-bgcolor;
 
           .e-path-circle {
-            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-info-bgcolor, $alpha: -$progress-btn-circle-opacity);
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+              stroke: color.adjust(btn.$btn-info-bgcolor, $alpha: -$progress-btn-circle-opacity);
+            }
+            @else if $skin-name == 'tailwind' {
+              stroke: color.adjust($progress-btn-info-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-info-bgcolor;
+            stroke: btn.$btn-info-bgcolor;
           }
         }
       }
 
       &.e-warning {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-warning-bgcolor;
-          stroke: $btn-warning-bgcolor;
+          fill: btn.$btn-warning-bgcolor;
+          stroke: btn.$btn-warning-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-warning-bgcolor, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-warning-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-warning-bgcolor;
+            stroke: btn.$btn-warning-bgcolor;
           }
         }
       }
 
       &.e-danger {
         .e-spinner-pane .e-spinner-inner svg {
-          fill: $btn-danger-bgcolor;
-          stroke: $btn-danger-bgcolor;
+          fill: btn.$btn-danger-bgcolor;
+          stroke: btn.$btn-danger-bgcolor;
 
           .e-path-circle {
             @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-              stroke: color.adjust($btn-danger-bgcolor, $alpha: -$progress-btn-circle-opacity);
+              stroke: color.adjust(btn.$btn-danger-bgcolor, $alpha: -$progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            stroke: $btn-danger-bgcolor;
+            stroke: btn.$btn-danger-bgcolor;
           }
         }
       }
@@ -450,17 +472,20 @@
 
     &.e-link {
       .e-spinner-pane .e-spinner-inner svg {
-        fill: $btn-link-color;
-        stroke: $btn-link-color;
+        fill: btn.$btn-link-color;
+        stroke: btn.$btn-link-color;
 
         .e-path-circle {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            stroke: color.adjust($btn-link-color, $alpha: -$progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            stroke: color.adjust(btn.$btn-link-color, $alpha: -$progress-btn-circle-opacity);
+          }
+          @else if $skin-name == 'tailwind' {
+            stroke: color.adjust($progress-btn-link-color, $alpha: -$progress-btn-circle-opacity);
           }
         }
 
         .e-path-arc {
-          stroke: $btn-link-color;
+          stroke: btn.$btn-link-color;
         }
       }
     }
@@ -475,9 +500,9 @@
     }
   }
 
-  #{if(&, '&', '*')}.e-primary,
-  #{if(&, '&', '*')}.e-success,
-  #{if(&, '&', '*')}.e-danger {
+  *.e-primary,
+  *.e-success,
+  *.e-danger {
     .e-progress {
       @if $skin-name == 'bootstrap5.3'  {
         background: currentColor;
@@ -488,7 +513,7 @@
     }
   }
 
-  #{if(&, '&', '*')}.e-info {
+  *.e-info {
     .e-progress {
       @if $skin-name == 'bootstrap5.3'  {
         background: currentColor;
@@ -499,7 +524,7 @@
     }
   }
 
-  #{if(&, '&', '*')}.e-flat {
+  *.e-flat {
     &.e-primary {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
@@ -541,11 +566,14 @@
     }
   }
 
-  #{if(&, '&', '*')}.e-outline:not(:focus) {
+  *.e-outline:not(:focus) {
     &.e-primary {
       .e-progress {
-        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+          background: color.adjust(btn.$btn-primary-bgcolor, $alpha: -.8);
+        }
+        @else if $skin-name == 'tailwind' {
+          background: color.adjust($progress-btn-primary-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -553,15 +581,18 @@
     &.e-success {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: color.adjust($btn-success-bgcolor, $alpha: -.8);
+          background: color.adjust(btn.$btn-success-bgcolor, $alpha: -.8);
         }
       }
     }
 
     &.e-info {
       .e-progress {
-        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: color.adjust($btn-info-bgcolor, $alpha: -.8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+          background: color.adjust(btn.$btn-info-bgcolor, $alpha: -.8);
+        }
+        @else if $skin-name == 'tailwind' {
+          background: color.adjust($progress-btn-info-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -569,7 +600,7 @@
     &.e-warning {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: color.adjust($btn-warning-bgcolor, $alpha: -.8);
+          background: color.adjust(btn.$btn-warning-bgcolor, $alpha: -.8);
         }
       }
     }
@@ -577,15 +608,15 @@
     &.e-danger {
       .e-progress {
         @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-          background: color.adjust($btn-danger-bgcolor, $alpha: -.8);
+          background: color.adjust(btn.$btn-danger-bgcolor, $alpha: -.8);
         }
       }
     }
   }
   
   @if $skin-name == 'Material3' {
-    #{if(&, '&', '*')}.e-flat,
-    #{if(&, '&', '*')}.e-flat:not(:focus) {
+    *.e-flat,
+    *.e-flat:not(:focus) {
       &.e-primary {
         .e-progress {
           background: $progress-btn-flat-primary-progress-color;
@@ -618,12 +649,15 @@
     }
   }
 
-  #{if(&, '&', '*')}.e-flat:not(:focus) {
+  *.e-flat:not(:focus) {
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
       &.e-primary {
         .e-progress {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            background: color.adjust(btn.$btn-primary-bgcolor, $alpha: -.8);
+          }
+          @else if $skin-name == 'tailwind' {
+            background: color.adjust($progress-btn-primary-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -631,15 +665,18 @@
       &.e-success {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: color.adjust($btn-success-bgcolor, $alpha: -.8);
+            background: color.adjust(btn.$btn-success-bgcolor, $alpha: -.8);
           }
         }
       }
 
       &.e-info {
         .e-progress {
-          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: color.adjust($btn-info-bgcolor, $alpha: -.8);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
+            background: color.adjust(btn.$btn-info-bgcolor, $alpha: -.8);
+          }
+          @else if $skin-name == 'tailwind' {
+            background: color.adjust($progress-btn-info-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -647,7 +684,7 @@
       &.e-warning {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: color.adjust($btn-warning-bgcolor, $alpha: -.8);
+            background: color.adjust(btn.$btn-warning-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -655,7 +692,7 @@
       &.e-danger {
         .e-progress {
           @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
-            background: color.adjust($btn-danger-bgcolor, $alpha: -.8);
+            background: color.adjust(btn.$btn-danger-bgcolor, $alpha: -.8);
           }
         }
       }
@@ -665,17 +702,17 @@
 
 @if $skin-name != 'fluent2' {
   .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
-    fill: $btn-outline-color;
-    stroke: $btn-outline-color;
+    fill: btn.$btn-outline-color;
+    stroke: btn.$btn-outline-color;
   }
   
   .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
-    fill: $btn-color;
-    stroke: $btn-color;
+    fill: btn.$btn-color;
+    stroke: btn.$btn-color;
   }
   
   .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-    stroke: $btn-outline-color;
+    stroke: btn.$btn-outline-color;
   }
 }