@syncfusion/ej2-navigations 25.2.4 → 26.1.35-750253

package/styles/stepper/_layout.scss

@@ -1,30 +1,78 @@
+@mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
+  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
+    .e-icons.e-step-indicator {
+      font-size: $step-width;
+    }
+    &.e-step-notstarted .e-icons.e-step-indicator {
+      width: $step-width;
+      height: $step-width;
+    }
+  }
+
+  .e-step-container {
+    .e-step,
+    .e-indicator {
+      min-width: $step-width;
+      min-height: $step-width;
+    }
+
+    .e-indicator {
+      font-size: $icon-size;
+    }
+
+    .e-step-text-container,
+    .e-step-label-container {
+      font-size: $text-size;
+    }
+
+    .e-step-content {
+      font-size: $icon-size;
+    }
+
+    .e-step-label-optional {
+      font-size: $optional-size;
+    }
+  }
+  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
+    font-size: $optional-size;
+  }
+}
+
 @include export-module('stepper-layout') {
   .e-stepper {
     position: relative;
+    .e-step-selected {
+      .e-text,
+      .e-label {
+        font-weight: $stepper-font-weight;
+      }
+    }
     &.e-stepper-readonly,
     .e-step-disabled {
       cursor: default;
       pointer-events: none;
     }
     &.e-step-type-indicator .e-step-container {
-      &:not(.e-step-icon.e-step-label.e-step-text) {
+      &:not(.e-step-item.e-step-label.e-step-text) {
         .e-icons.e-step-indicator {
           font-size: $stepper-step-width;
           border-radius: $stepper-step-radius;
         }
       }
-      .e-step-content {
-        padding: 0 8px;
-      }
+    }
+
+    &.e-step-type-indicator .e-step-content,
+    &.e-step-type-label .e-step-content {
+      padding: 0 8px;
     }
 
     //For Blazor Stepper Tooltip
     .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
-    &.e-vertical.e-label-after .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
-    &.e-vertical.e-label-before .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
+    &.e-vertical.e-label-after .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
+    &.e-vertical.e-label-before .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
       position: relative;
     }
-    &.e-horizontal .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
+    &.e-horizontal .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
       position: unset;
     }
     .e-tooltip-wrap.e-stepper-tooltip {
@@ -49,7 +97,7 @@
         top: -6px;
       }
     }
-    .e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
+    .e-step-item.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
       left: unset;
       top: 0;
       transform: translate(0%, -135%);
@@ -83,6 +131,7 @@
       .e-step-text-container {
         max-width: clamp(100%, 10em, 100%);
         white-space: nowrap;
+        font-size: $stepper-text-size;
       }
       .e-step-label-optional {
         font-size: $stepper-optional-size;
@@ -117,10 +166,6 @@
           top: $stepper-validation-position;
         }
       }
-      .e-step-label-container,
-      .e-step-text-container {
-        font-size: $stepper-text-size;
-      }
       .e-step,
       .e-indicator {
         border-radius: $stepper-step-radius;
@@ -139,7 +184,7 @@
       }
       &.e-label-before,
       &.e-label-after {
-        &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
           margin-left: var(--progress-left-position);
           top: var(--progress-top-position);
           width: var(--progress-bar-width);
@@ -147,16 +192,16 @@
       }
       &.e-label-before.e-rtl,
       &.e-label-after.e-rtl {
-        &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
           margin-right: var(--progress-left-position);
           margin-left: unset;
         }
       }
-      .e-step-icon.e-step-label {
+      .e-step-item.e-step-label {
         gap: 1em;
         flex-direction: column;
       }
-      .e-step-icon.e-step-label .e-step-label-container {
+      .e-step-item.e-step-label .e-step-label-container {
         position: relative;
         &.e-label-before {
           order: -1;
@@ -165,17 +210,17 @@
       &.e-label-start .e-step-text-container {
         order: $stepper-label-order;
       }
-      .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+      .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
         position: absolute;
         top: 2.5em;
         margin-left: 2.5em;
       }
-      &.e-label-start .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional,
-      &.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+      &.e-label-start .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional,
+      &.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
         margin-right: 2.5em;
         margin-left: unset;
       }
-      &.e-label-start.e-rtl .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+      &.e-label-start.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
         margin-right: unset;
         margin-left: 2.5em;
       }
@@ -196,17 +241,16 @@
       }
       .e-step-text.e-step-text-only:has(.e-step-label-optional),
       .e-step-label.e-step-label-only:has(.e-step-label-optional),
-      .e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
-      .e-step-label-container.e-label-after:has(.e-step-label-optional) {
-        flex-wrap: wrap;
-      }
+      .e-step-item:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
+      .e-step-container:not(.e-step-item):not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
+      .e-step-label-container.e-label-after:has(.e-step-label-optional),
       &.e-step-type-indicator .e-step-container {
         flex-wrap: wrap;
       }
-      .e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
+      .e-step-item:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
         margin-top: .5em;
       }
-      &.e-label-after .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-optional {
+      &.e-label-after .e-step-item.e-step-label:not(.e-step-text) .e-step-label-optional {
         margin-top: .2em;
       }
     }
@@ -220,11 +264,11 @@
       &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
         position: absolute;
       }
-      &:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+      &:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
         margin-top: $stepper-label-optional;
         margin-left: 4em;
       }
-      &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+      &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
         margin-left: unset;
         margin-right: 4em;
       }
@@ -239,25 +283,25 @@
       &.e-rtl .e-stepper-steps {
         float: right;
       }
-      .e-stepper-steps:has(.e-step-icon:not(.e-step-text):not(.e-step-label)),
+      .e-stepper-steps:has(.e-step-item:not(.e-step-text):not(.e-step-label)),
       .e-stepper-steps:has(.e-step-text.e-step-text-only),
       .e-stepper-steps:has(.e-step-label.e-step-label-only),
-      &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-icon)),
+      &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-item)),
       &.e-step-type-indicator .e-stepper-steps {
         align-items: center;
       }
-      .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
-      .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+      .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
+      .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
         margin-left: $stepper-text-postion;
       }
       &.e-rtl {
-        .e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
-        .e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+        .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
+        .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
           margin-left: unset;
           margin-right: $stepper-text-postion;
         }
       }
-      .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
+      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
       &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
       .e-step-text-only.e-step-text:has(.e-step-label-optional),
       .e-step-label-only.e-step-label:has(.e-step-label-optional) {
@@ -266,12 +310,12 @@
           position: unset;
         }
       }
-      .e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
+      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
       &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
         gap: .5em;
       }
-      &.e-label-before .e-step-icon.e-step-label,
-      &.e-label-after .e-step-icon.e-step-label {
+      &.e-label-before .e-step-item.e-step-label,
+      &.e-label-after .e-step-item.e-step-label {
         .e-step-label-container.e-label-after:has(.e-step-label-optional) {
           flex-direction: column;
           .e-label {
@@ -283,16 +327,14 @@
         }
       }
       .e-step-container {
-        &.e-step-label.e-step-text:not(.e-step-icon) .e-step-label-container.e-label-after {
+        &.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after {
           position: absolute;
           .e-step-label-optional {
             left: $stepper-ol-padding;
           }
         }
-        .e-step-label-container.e-label-after {
-          .e-step-label-optional {
-            font-size: $stepper-optional-size;
-          }
+        .e-step-label-container.e-label-after .e-step-label-optional {
+          font-size: $stepper-optional-size;
         }
         .e-step-label-container.e-label-before .e-label {
           width: var(--label-width);
@@ -307,10 +349,8 @@
           position: unset;
         }
       }
-      &.e-label-top {
-        .e-step-label-optional {
-          padding-bottom: 6px;
-        }
+      &.e-label-top .e-step-label-optional {
+        padding-bottom: 6px;
       }
     }
     &.e-vertical.e-label-top,
@@ -376,110 +416,17 @@
   }
   .e-small.e-stepper,
   .e-small .e-stepper {
-    &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
-      .e-icons.e-step-indicator {
-        font-size: $stepper-small-step-width;
-      }
-      &.e-step-notstarted .e-icons.e-step-indicator {
-        width: $stepper-small-step-width;
-        height: $stepper-small-step-width;
-      }
-    }
-    .e-step-container {
-      .e-step,
-      .e-indicator {
-        min-width: $stepper-small-step-width;
-        min-height: $stepper-small-step-width;
-      }
-      .e-indicator {
-        font-size: $stepper-small-icon-size;
-      }
-      .e-step-text-container,
-      .e-step-label-container {
-        font-size: $stepper-small-text-size;
-      }
-      .e-step-content {
-        font-size: $stepper-small-icon-size;
-      }
-      .e-step-label-optional {
-        font-size: $stepper-small-optional-size;
-      }
-    }
-    &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
-      font-size: $stepper-small-optional-size;
-    }
+    @include stepper-styles($stepper-small-step-width, $stepper-small-icon-size, $stepper-small-text-size, $stepper-small-optional-size);
   }
   .e-bigger.e-stepper,
   .e-bigger .e-stepper {
-    &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
-      .e-icons.e-step-indicator {
-        font-size: $stepper-bigger-step-width;
-      }
-      &.e-step-notstarted .e-icons.e-step-indicator {
-        width: $stepper-bigger-step-width;
-        height: $stepper-bigger-step-width;
-      }
-    }
-    .e-step-container {
-      .e-step,
-      .e-indicator {
-        min-width: $stepper-bigger-step-width;
-        min-height: $stepper-bigger-step-width;
-      }
-      .e-indicator {
-        font-size: $stepper-bigger-icon-size;
-      }
-      .e-step-text-container,
-      .e-step-label-container {
-        font-size: $stepper-bigger-text-size;
-      }
-      .e-step-content {
-        font-size: $stepper-bigger-icon-size;
-      }
-      .e-step-label-optional {
-        font-size: $stepper-bigger-optional-size;
-      }
-    }
-    &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
-      font-size: $stepper-bigger-optional-size;
-    }
+    @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
   }
 
   .e-bigger.e-small.e-stepper,
   .e-bigger.e-small .e-stepper,
   .e-bigger .e-small.e-stepper,
   .e-small .e-bigger.e-stepper {
-    &.e-step-type-indicator .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
-      .e-icons.e-step-indicator {
-        font-size: $stepper-bigger-small-step-width;
-      }
-      &.e-step-notstarted .e-icons.e-step-indicator {
-        width: $stepper-bigger-small-step-width;
-        height: $stepper-bigger-small-step-width;
-      }
-    }
-    .e-step-container {
-      .e-step,
-      .e-indicator {
-        min-width: $stepper-bigger-small-step-width;
-        min-height: $stepper-bigger-small-step-width;
-      }
-      .e-indicator {
-        font-size: $stepper-bigger-small-icon-size;
-      }
-      .e-step-text-container,
-      .e-step-label-container {
-        font-size: $stepper-bigger-small-text-size;
-      }
-      .e-step-content {
-        font-size: $stepper-bigger-small-icon-size;
-      }
-      .e-step-label-optional {
-        font-size: $stepper-bigger-small-optional-size;
-      }
-    }
-    &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
-      font-size: $stepper-bigger-small-optional-size;
-    }
+    @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
   }
 }

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

@@ -13,13 +13,8 @@ $stepper-validation-position: .25em !default;
 $stepper-text-padding: 0 6px !default;
 $stepper-icon-text-padding: 2px 8px !default;
 $stepper-text-vert-padding: 6px 0 !default;
-$stepper-text-radius: 15px !default;
-$stepper-text-block: 5px !default;
-$stepper-optional-top: 2em !default;
 $stepper-label-optional: 3em !default;
-$stepper-top-label-optional: 3.5em !default;
 $stepper-text-postion: 10px !default;
-$stepper-icon-padding: 0 3px 0 4px !default;
 $stepper-optional-size: 12px !default;
 $step-border: 2px solid !default;
 $stepper-label-order: -1 !default;
@@ -47,7 +42,6 @@ $step-keyboard-selected-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $grey-
 $step-valid-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $success-bg, 0 0 0 8px $overlay-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $error-font, 0 0 0 8px $overlay-bg-color !default;
 $step-li-shadow: 0 0 0 8px $overlay-bg-color !default;
-
 $step-border-color: $overlay-bg-color !default;
 $step-hover-text-color: $primary-font !default;
 $step-hover-not-text-color: $grey-400 !default;
@@ -72,7 +66,6 @@ $step-valid-completed-bg-color: $success-bg !default;
 $step-error-icon-color: $primary-font !default;
 $step-error-completed-color: $error-font !default;
 $step-error-completed-bg-color: $error-font !default;
-$step-indicator-color: $grey-900 !default;
 $step-hover-color: $grey-800 !default;
 $step-active-color: $overlay-bg-color !default;
 $step-selected-hover-color: lighten($primary, 10%) !default;

package/styles/stepper/_material-definition.scss

@@ -13,13 +13,8 @@ $stepper-validation-position: .25em !default;
 $stepper-text-padding: 0 6px !default;
 $stepper-icon-text-padding: 0 8px !default;
 $stepper-text-vert-padding: 6px 0 !default;
-$stepper-text-radius: 15px !default;
-$stepper-text-block: 5px !default;
-$stepper-optional-top: 2em !default;
 $stepper-label-optional: 3em !default;
-$stepper-top-label-optional: 3.5em !default;
 $stepper-text-postion: 10px !default;
-$stepper-icon-padding: 0 3px 0 4px !default;
 $stepper-optional-size: 12px !default;
 $step-border: 2px solid !default;
 $stepper-label-order: -1 !default;
@@ -47,7 +42,6 @@ $step-keyboard-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $base-font,
 $step-valid-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $msg-success-color-alt1, 0 0 0 8px $grey-white !default;
 $step-error-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px darken($error-font, 11%), 0 0 0 8px $grey-white !default;
 $step-li-shadow: 0 0 0 8px $grey-white !default;
-
 $step-border-color: $grey-400 !default;
 $step-hover-text-color: $primary-300-font !default;
 $step-hover-not-text-color: $base-font !default;
@@ -72,7 +66,6 @@ $step-valid-completed-bg-color: $msg-success-color-alt1 !default;
 $step-error-icon-color: $primary-300-font !default;
 $step-error-completed-color: darken($error-font, 11%) !default;
 $step-error-completed-bg-color: darken($error-font, 11%) !default;
-$step-indicator-color: $primary-300-font !default;
 $step-hover-color: $grey-500 !default;
 $step-active-color: $grey-600 !default;
 $step-selected-hover-color: darken($primary, 10%) !default;

package/styles/stepper/_material3-definition.scss

@@ -7,11 +7,8 @@ $stepper-progress-value-height: 100% !default;
 $stepper-progress-position: 50% !default;
 $stepper-temp-outline-width: 2px solid !default;
 $stepper-label-top: 1em !default;
-$stepper-optional-top: 2em !default;
 $stepper-label-optional: 3em !default;
-$stepper-top-label-optional: 3.5em !default;
 $stepper-text-postion: 10px !default;
-$stepper-icon-padding: 0 3px 0 4px !default;
 $stepper-optional-size: 12px !default;
 $stepper-label-bottom: 4.5em !default;
 $stepper-label-position: 2.5em !default;
@@ -19,8 +16,6 @@ $stepper-validation-position: .25em !default;
 $stepper-icon-text-padding: 0 8px !default;
 $stepper-text-padding: 0 6px !default;
 $stepper-text-vert-padding: 6px 0 !default;
-$stepper-text-radius: 15px !default;
-$stepper-text-block: 5px !default;
 $step-border: 2px solid !default;
 $stepper-label-order: -1 !default;
 $stepper-font-weight: 600 !default;
@@ -47,7 +42,6 @@ $step-keyboard-selected-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px
 $step-valid-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($success), 0 0 0 8px rgba($content-bg-color) !default;
 $step-error-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($danger), 0 0 0 8px rgba($content-bg-color) !default;
 $step-li-shadow: 0 0 0 8px rgba($content-bg-color) !default;
-
 $step-border-color: rgba($border-light) !default;
 $step-hover-text-color: rgba($primary-text-color) !default;
 $step-hover-not-text-color: rgba($content-text-color) !default;
@@ -76,4 +70,3 @@ $step-hover-color: rgba($border-light) !default;
 $step-active-color: rgba($border-light) !default;
 $step-selected-hover-color: $primary-bg-color-hover !default;
 $step-selected-active-color: $primary-bg-color-pressed !default;
-$step-indicator-color: $content-bg-color-alt5 !default;

package/styles/stepper/_tailwind-definition.scss

@@ -13,13 +13,8 @@ $stepper-validation-position: .25em !default;
 $stepper-text-padding: 0 6px !default;
 $stepper-icon-text-padding: 0 8px !default;
 $stepper-text-vert-padding: 6px 0 !default;
-$stepper-text-radius: 15px !default;
-$stepper-text-block: 5px !default;
-$stepper-optional-top: 2em !default;
 $stepper-label-optional: 3em !default;
-$stepper-top-label-optional: 3.5em !default;
 $stepper-text-postion: 10px !default;
-$stepper-icon-padding: 0 3px 0 4px !default;
 $stepper-optional-size: 12px !default;
 $step-border: 2px solid !default;
 $stepper-label-order: -1 !default;
@@ -47,7 +42,6 @@ $step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $conte
 $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success-border-color, 0 0 0 8px $content-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $border-error, 0 0 0 8px $content-bg-color !default;
 $step-li-shadow: 0 0 0 8px $content-bg-color !default;
-
 $step-border-color: $border !default;
 $step-hover-text-color: $primary-text-color !default;
 $step-hover-not-text-color: $content-text-color-alt2 !default;
@@ -72,7 +66,6 @@ $step-valid-completed-bg-color: $success-border-color !default;
 $step-error-icon-color: $primary-text-color !default;
 $step-error-completed-color: $border-error !default;
 $step-error-completed-bg-color: $border-error !default;
-$step-indicator-color: $content-bg-color !default;
 $step-hover-color: $content-bg-color !default;
 $step-active-color: $content-bg-color !default;
 $step-selected-hover-color: $primary-bg-color-hover !default;

package/styles/stepper/_theme.scss

@@ -1,3 +1,10 @@
+@mixin stepper-text-label-colors($step-label-text-color) {
+  .e-text,
+  .e-label {
+    color: $step-label-text-color;
+  }
+}
+
 @include export-module('stepper-theme') {
   .e-stepper {
     .e-step-notstarted:not(.e-step-disabled) .e-step,
@@ -37,21 +44,12 @@
         background: $step-error-completed-bg-color;
         color: $step-error-icon-color;
       }
-      .e-text,
-      .e-label {
-        color: $step-error-completed-color;
-      }
+      @include stepper-text-label-colors($step-error-completed-color);
     }
     .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
     .e-step-error .e-indicator:hover {
       color: $step-color;
     }
-    .e-step-selected {
-      .e-text,
-      .e-label {
-        font-weight: $stepper-font-weight;
-      }
-    }
     .e-step-valid.e-step-text-only,
     .e-step-valid.e-step-label-only {
       .e-step-validation-icon {
@@ -64,18 +62,12 @@
         color: $step-error-icon-only-color;
       }
     }
-    .e-text,
-    .e-label {
-      color: $stepper-text-color;
-    }
+    @include stepper-text-label-colors($stepper-text-color);
     .e-step-selected:not(.e-step-error),
     .e-step-completed:not(.e-step-error) {
-      .e-text,
-      .e-label {
-        color: $step-completed-bg-color;
-      }
+      @include stepper-text-label-colors($step-completed-bg-color);
     }
-    .e-step-label:not(.e-step-icon) .e-step-label-container {
+    .e-step-label:not(.e-step-item) .e-step-label-container {
       background-color: $stepper-outline-color;
     }
     .e-step-text-container {
@@ -93,7 +85,7 @@
     }
     &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
     &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
-    &.e-vertical .e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
+    &.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
     &.e-vertical.e-label-top .e-step-label-optional,
     &.e-vertical.e-label-bottom .e-step-label-optional {
       background-color: $stepper-outline-color;