@syncfusion/blazor-themes 25.1.38 → 25.1.40

package/SCSS-Themes/navigations/stepper/material.scss

@@ -82,12 +82,11 @@ $step-selected-active-color: darken($primary, 15%) !default;
   .e-stepper {
     position: relative;
     &.e-stepper-readonly,
-    .e-stepper-steps .e-step-container.e-step-disabled {
+    .e-step-disabled {
       cursor: default;
       pointer-events: none;
     }
-
-    &.e-step-type-indicator .e-stepper-steps .e-step-container {
+    &.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-step-width;
@@ -100,12 +99,12 @@ $step-selected-active-color: darken($primary, 15%) !default;
     }
 
     //For Blazor Stepper Tooltip
-    .e-stepper-steps .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
-    &.e-vertical.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
-    &.e-vertical.e-label-before .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-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) {
       position: relative;
     }
-    &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
+    &.e-horizontal .e-step-icon.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
       position: unset;
     }
     .e-tooltip-wrap.e-stepper-tooltip {
@@ -130,15 +129,14 @@ $step-selected-active-color: darken($primary, 15%) !default;
         top: -6px;
       }
     }
-    .e-stepper-steps .e-step-container.e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
+    .e-step-icon.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
       left: unset;
       top: 0;
       transform: translate(0%, -135%);
     }
-    &.e-step-type-indicator .e-stepper-steps .e-step-container .e-tooltip-wrap.e-stepper-tooltip {
+    &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
       transform: translate(-50%, -115%);
     }
-
     .e-stepper-steps {
       display: flex;
       padding: 0;
@@ -146,124 +144,170 @@ $step-selected-active-color: darken($primary, 15%) !default;
       justify-content: space-between;
       position: relative;
       align-items: flex-start;
-      .e-step-container {
-        max-width: var(--max-width);
-        &.e-step-notstarted:not(.e-step-disabled) .e-step,
-        &.e-step-notstarted:not(.e-step-disabled) .e-indicator {
-          border: $step-border;
-        }
-        .e-step-label-container,
-        .e-step-text-container {
-          max-width: clamp(100%, 10em, 100%);
-          white-space: nowrap;
-        }
-        .e-step-label-optional {
-          font-size: $stepper-optional-size;
-          flex-basis: 100%;
-        }
-        .e-step-optional-container {
-          display: flex;
-          flex-direction: column;
+      .e-step-container,
+      .e-step,
+      .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
+      .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
+      .e-step-label-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .e-step-container {
+      max-width: var(--max-width);
+      list-style-type: none;
+      cursor: pointer;
+      text-align: center;
+      .e-step-label-container,
+      .e-step-text-container {
+        max-width: clamp(100%, 10em, 100%);
+        white-space: nowrap;
+      }
+      .e-step-label-optional {
+        font-size: $stepper-optional-size;
+        flex-basis: 100%;
+      }
+      .e-step-optional-container {
+        display: flex;
+        flex-direction: column;
+      }
+      .e-step-content {
+        font-size: $stepper-icon-size;
+        line-height: 0;
+      }
+      .e-indicator {
+        font-size: $stepper-icon-size;
+      }
+      &:not(.e-step-text-only) > .e-step-text-container {
+        padding: $stepper-icon-text-padding;
+      }
+      &.e-step-text-only .e-step-text-container,
+      &.e-step-label-only .e-step-label-container {
+        padding: $stepper-text-padding;
+        padding-block: 5px;
+      }
+      &.e-step-text-only.e-step-error .e-step-text-container,
+      &.e-step-text-only.e-step-valid .e-step-text-container,
+      &.e-step-label-only.e-step-error .e-step-label-container,
+      &.e-step-label-only.e-step-valid .e-step-label-container {
+        flex-direction: column;
+        .e-step-validation-icon {
+          position: relative;
+          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;
+        min-width: $stepper-step-width;
+        min-height: $stepper-step-width;
+      }
+    }
+    .e-step-notstarted:not(.e-step-disabled) .e-step,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator {
+      border: $step-border;
     }
-
     &.e-horizontal {
       display: block;
       .e-stepper-steps {
         flex-direction: row;
       }
-
       &.e-label-before,
       &.e-label-after {
-        &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+        &:has(.e-step-icon.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);
         }
       }
-
       &.e-label-before.e-rtl,
       &.e-label-after.e-rtl {
-        &:has(.e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
+        &:has(.e-step-icon.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
           margin-right: var(--progress-left-position);
           margin-left: unset;
         }
       }
-    }
-
-    &.e-horizontal .e-stepper-steps .e-step-container {
-      &.e-step-icon.e-step-label {
+      .e-step-icon.e-step-label {
         gap: 1em;
+        flex-direction: column;
       }
-
-      &.e-step-icon.e-step-label .e-step-label-container {
+      .e-step-icon.e-step-label .e-step-label-container {
         position: relative;
         &.e-label-before {
           order: -1;
         }
       }
-
-      &.e-step-text.e-step-label,
-      &.e-step-icon.e-step-label {
-        flex-direction: column;
+      &.e-label-start .e-step-text-container {
+        order: $stepper-label-order;
       }
-    }
-
-    &.e-horizontal.e-label-start .e-stepper-steps .e-step-container .e-step-text-container {
-      order: $stepper-label-order;
-    }
-
-    &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
-      position: absolute;
-      top: 2.5em;
-      margin-left: 2.5em;
-    }
-
-    &.e-horizontal.e-label-start .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional,
-    &.e-horizontal.e-rtl .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
-      margin-right: 2.5em;
-      margin-left: unset;
-    }
-
-    &.e-horizontal.e-label-start.e-rtl .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
-      margin-right: unset;
-      margin-left: 2.5em;
-    }
-
-    &.e-horizontal.e-label-before .e-stepper-steps {
-      &:has(.e-step-label-optional) {
-        align-items: flex-end;
+      .e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+        position: absolute;
+        top: 2.5em;
+        margin-left: 2.5em;
       }
-      .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
-        flex-direction: column;
-        gap: .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 {
+        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 {
+        margin-right: unset;
+        margin-left: 2.5em;
+      }
+      &.e-label-before .e-stepper-steps {
+        &:has(.e-step-label-optional) {
+          align-items: flex-end;
+        }
+        .e-step-label-container.e-label-before:has(.e-step-label-optional) {
+          flex-direction: column;
+          gap: .5em;
+        }
+      }
+      .e-text,
+      .e-label,
+      .e-step-label-optional {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .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-type-indicator .e-step-container {
+        flex-wrap: wrap;
+      }
+      .e-step-icon: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 {
+        margin-top: .2em;
       }
     }
-
     &.e-vertical {
       min-height: inherit;
       display: inline-block;
-
-      .e-stepper-steps .e-step-container.e-step-label.e-step-label-only,
-      .e-stepper-steps .e-step-container.e-step-template {
+      .e-step-label.e-step-label-only,
+      .e-step-template {
         position: relative;
       }
-
-      &:not(.e-label-top):not(.e-label-bottom) .e-stepper-steps .e-step-container .e-step-label-optional {
+      &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
         position: absolute;
       }
-
-      &:not(.e-label-bottom):not(.e-label-top) .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
+      &:not(.e-label-bottom):not(.e-label-top) .e-step-icon.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-stepper-steps .e-step-container.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-icon.e-step-text:not(.e-step-label) .e-step-label-optional {
         margin-left: unset;
         margin-right: 4em;
       }
-
       .e-stepper-steps {
         flex-direction: column;
         min-height: inherit;
@@ -272,49 +316,42 @@ $step-selected-active-color: darken($primary, 15%) !default;
         margin: $stepper-ol-padding;
         justify-content: space-between;
       }
-
       &.e-rtl .e-stepper-steps {
         float: right;
       }
-
-      .e-stepper-steps:has(.e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label)),
-      .e-stepper-steps:has(.e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label)),
-      .e-stepper-steps:has(.e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-text)),
-      &.e-label-after .e-stepper-steps:has(.e-step-container.e-step-label.e-step-text:not(.e-step-icon)),
+      .e-stepper-steps:has(.e-step-icon: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-step-type-indicator .e-stepper-steps {
         align-items: center;
       }
-
-      .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
-      .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+      .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 {
         margin-left: $stepper-text-postion;
       }
-
       &.e-rtl {
-        .e-stepper-steps .e-step-container.e-step-icon.e-step-text:not(.e-step-label) .e-step-text-container,
-        .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
+        .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 {
           margin-left: unset;
           margin-right: $stepper-text-postion;
         }
       }
-
-      .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
-      &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional),
-      .e-stepper-steps .e-step-container.e-step-text-only.e-step-text:has(.e-step-label-optional),
-      .e-stepper-steps .e-step-container.e-step-label-only.e-step-label:has(.e-step-label-optional) {
+      .e-step-icon: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) {
         flex-direction: column;
         .e-step-label-optional {
           position: unset;
         }
       }
-
-      .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
-      &.e-label-before .e-stepper-steps .e-step-container .e-step-label-container.e-label-before:has(.e-step-label-optional) {
+      .e-step-icon: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-stepper-steps .e-step-container.e-step-icon.e-step-label,
-      &.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label {
+      &.e-label-before .e-step-icon.e-step-label,
+      &.e-label-after .e-step-icon.e-step-label {
         .e-step-label-container.e-label-after:has(.e-step-label-optional) {
           flex-direction: column;
           .e-label {
@@ -325,43 +362,37 @@ $step-selected-active-color: darken($primary, 15%) !default;
           position: unset;
         }
       }
-
-      .e-stepper-steps .e-step-container {
+      .e-step-container {
         &.e-step-label.e-step-text:not(.e-step-icon) .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-before .e-label {
           width: var(--label-width);
         }
-
         &:not(.e-step-text-only) .e-step-text-container {
           border: none;
           border-radius: unset;
           padding: $stepper-text-vert-padding;
         }
-
-        &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
-        &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
+        &.e-step-text-only .e-step-text-container,
+        &.e-step-label-only .e-step-label-container {
           position: unset;
         }
       }
       &.e-label-top {
-        .e-stepper-steps .e-step-container .e-step-label-optional {
+        .e-step-label-optional {
           padding-bottom: 6px;
         }
       }
     }
-
     &.e-vertical.e-label-top,
     &.e-vertical.e-label-bottom {
       .e-stepper-steps {
@@ -369,98 +400,17 @@ $step-selected-active-color: darken($primary, 15%) !default;
         .e-step-container {
           flex-direction: column;
           .e-step-text-container {
-            margin-left: $stepper-ol-padding !important; /* stylelint-disable-line declaration-no-important */
+            margin-left: $stepper-ol-padding;
           }
         }
       }
     }
-
-    &.e-vertical.e-label-top .e-stepper-steps .e-step-container {
+    &.e-vertical.e-label-top .e-step-container {
       .e-step-label-optional,
       .e-step-text-container {
         order: $stepper-label-order;
       }
     }
-    .e-stepper-steps  {
-      .e-step-container,
-      .e-step-container .e-step,
-      .e-step-container.e-step-valid.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
-      .e-step-container.e-step-error.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
-      .e-step-container .e-step-label-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    &.e-horizontal {
-      .e-stepper-steps {
-        .e-step-container.e-step-text.e-step-text-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
-        .e-step-container.e-step-label.e-step-label-only:not(.e-step-icon.e-step-label):has(.e-step-label-optional),
-        .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
-        .e-step-container .e-step-label-container.e-label-after:has(.e-step-label-optional) {
-          flex-wrap: wrap;
-        }
-      }
-      &.e-step-type-indicator .e-step-container {
-        flex-wrap: wrap;
-      }
-    }
-
-    &.e-horizontal .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
-      margin-top: .5em;
-    }
-
-    &.e-horizontal.e-label-after .e-stepper-steps .e-step-container.e-step-icon.e-step-label:not(.e-step-text) .e-step-label-optional {
-      margin-top: .2em;
-    }
-
-    .e-stepper-steps .e-step-container {
-      list-style-type: none;
-      cursor: pointer;
-      text-align: center;
-
-      .e-step-content {
-        font-size: $stepper-icon-size;
-        line-height: 0;
-      }
-
-      .e-indicator {
-        font-size: $stepper-icon-size;
-      }
-
-      &:not(.e-step-text-only) > .e-step-text-container {
-        padding: $stepper-icon-text-padding;
-      }
-
-      &.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
-      &.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
-        padding: $stepper-text-padding;
-        padding-block: 5px;
-      }
-
-      &.e-step-text-only.e-step-error:not(.e-step-icon.e-step-label) .e-step-text-container,
-      &.e-step-text-only.e-step-valid:not(.e-step-icon.e-step-label) .e-step-text-container,
-      &.e-step-label-only.e-step-error:not(.e-step-icon.e-step-text) .e-step-label-container,
-      &.e-step-label-only.e-step-valid:not(.e-step-icon.e-step-text) .e-step-label-container {
-        flex-direction: column;
-        .e-step-validation-icon {
-          position: relative;
-          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;
-        min-width: $stepper-step-width;
-        min-height: $stepper-step-width;
-      }
-    }
-
     .e-stepper-progressbar {
       height: $stepper-progress-bar-height;
       position: absolute;
@@ -475,7 +425,6 @@ $step-selected-active-color: darken($primary, 15%) !default;
         transition-delay: var(--delay);
       }
     }
-
     &.e-vertical .e-stepper-progressbar {
       min-height: inherit;
       width: $stepper-progress-bar-height;
@@ -488,40 +437,26 @@ $step-selected-active-color: darken($primary, 15%) !default;
         transition-property: height;
       }
     }
-
     &.e-vertical.e-rtl .e-stepper-progressbar {
       right: var(--progress-position);
       left: unset;
     }
-
-    &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-stepper-steps .e-step-container:not(.e-step-text-only):not(.e-step-label-only) .e-indicator,
-    .e-stepper-steps .e-step-container.e-step-focus .e-indicator {
+    &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
+    .e-step-focus .e-indicator {
       z-index: 0;
     }
-
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
+    .e-step-template.e-step-focus {
       outline: $stepper-temp-outline-width;
     }
   }
-
   .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
     .e-arrow-tip.e-tip-bottom {
       top: 90% !important; /* stylelint-disable-line declaration-no-important */
     }
   }
-
-  .e-stepper.e-horizontal .e-stepper-steps .e-step-container {
-    .e-text,
-    .e-label,
-    .e-step-label-optional {
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-
   .e-small.e-stepper,
   .e-small .e-stepper {
-    &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
+    &.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;
       }
@@ -530,39 +465,33 @@ $step-selected-active-color: darken($primary, 15%) !default;
         height: $stepper-small-step-width;
       }
     }
-
-    .e-stepper-steps .e-step-container {
+    .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-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
+    &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
       font-size: $stepper-small-optional-size;
     }
   }
-
   .e-bigger.e-stepper,
   .e-bigger .e-stepper {
-    &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
+    &.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;
       }
@@ -571,32 +500,27 @@ $step-selected-active-color: darken($primary, 15%) !default;
         height: $stepper-bigger-step-width;
       }
     }
-
-    .e-stepper-steps .e-step-container {
+    .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-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
+    &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
       font-size: $stepper-bigger-optional-size;
     }
   }
@@ -605,7 +529,7 @@ $step-selected-active-color: darken($primary, 15%) !default;
   .e-bigger.e-small .e-stepper,
   .e-bigger .e-small.e-stepper,
   .e-small .e-bigger.e-stepper {
-    &.e-step-type-indicator .e-stepper-steps .e-step-container:not(.e-step-icon.e-step-label.e-step-text) {
+    &.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;
       }
@@ -614,31 +538,27 @@ $step-selected-active-color: darken($primary, 15%) !default;
         height: $stepper-bigger-small-step-width;
       }
     }
-
-    .e-stepper-steps .e-step-container {
+    .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{
+      .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-stepper-steps .e-step-container .e-step-label-container.e-label-after .e-step-label-optional {
+    &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
       font-size: $stepper-bigger-small-optional-size;
     }
   }
@@ -647,229 +567,203 @@ $step-selected-active-color: darken($primary, 15%) !default;
 
 @include export-module('stepper-theme') {
   .e-stepper {
-    .e-stepper-steps {
-      .e-step-container {
-        &.e-step-notstarted:not(.e-step-disabled) .e-step,
-        &.e-step-notstarted:not(.e-step-disabled) .e-indicator,
-        &.e-step-notstarted .e-icons.e-step-indicator {
-          border-color: $step-border-color;
-        }
-
-        .e-step-label-optional {
-          color: $step-optional-color;
-        }
-
-        .e-step,
-        .e-indicator {
-          color: $step-color;
-          background: $step-bg-color;
-        }
-
-        .e-step-indicator {
-          color: transparent;
-        }
-
-        &.e-step-completed .e-step,
-        &.e-step-inprogress .e-step,
-        &.e-step-completed .e-indicator,
-        &.e-step-inprogress .e-indicator,
-        &.e-step-completed .e-step-indicator,
-        &.e-step-inprogress .e-step-indicator {
-          background: $step-completed-bg-color;
-          color: $step-completed-color;
-        }
-
-        &.e-step-valid {
-          .e-indicator {
-            background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
-            color: $step-valid-completed-color;
-          }
-        }
-
-        &.e-step-error {
-          .e-indicator {
-            background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
-            color: $step-error-icon-color;
-          }
-
-          .e-text,
-          .e-label {
-            color: $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:not(.e-step-icon.e-step-label) .e-step-text-container,
-        &.e-step-valid.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
-          .e-step-validation-icon {
-            color: $step-valid-icon-only-color;
-          }
-        }
-
-        &.e-step-error.e-step-text-only:not(.e-step-icon.e-step-label) .e-step-text-container,
-        &.e-step-error.e-step-label-only:not(.e-step-icon.e-step-text) .e-step-label-container {
-          .e-step-validation-icon {
-            color: $step-error-icon-only-color;
-          }
-        }
-
-        .e-text,
-        .e-label {
-          color: $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;
-          }
-        }
-
-        &.e-step-label:not(.e-step-icon) .e-step-label-container {
-          background-color: $stepper-outline-color;
-        }
-        
-        .e-step-text-container {
-          background-color: $stepper-outline-color;
-          border-color: transparent;
-        }
-
-        &.e-step-selected .e-indicator {
-          background: $step-completed-bg-color;
-        }
-
-        &.e-step-disabled .e-indicator {
-          background: $step-disabled-bg-color !important; /* stylelint-disable-line declaration-no-important */
-          color: $step-disabled-color !important; /* stylelint-disable-line declaration-no-important */
-        }
-
-        &.e-step-disabled .e-text,
-        &.e-step-disabled .e-label,
-        &.e-step-disabled .e-step-validation-icon {
-          color: $step-disabled-font-color !important; /* stylelint-disable-line declaration-no-important */
-        }
+    .e-step-notstarted:not(.e-step-disabled) .e-step,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator,
+    .e-step-notstarted .e-icons.e-step-indicator {
+      border-color: $step-border-color;
+    }
+    .e-step-label-optional {
+      color: $step-optional-color;
+    }
+    .e-step,
+    .e-indicator {
+      color: $step-color;
+      background: $step-bg-color;
+    }
+    .e-step-indicator {
+      color: transparent;
+    }
+    .e-step-completed .e-step,
+    .e-step-inprogress .e-step,
+    .e-step-completed .e-indicator,
+    .e-step-inprogress .e-indicator,
+    .e-step-completed .e-step-indicator,
+    .e-step-inprogress .e-step-indicator {
+      background: $step-completed-bg-color;
+      color: $step-completed-color;
+    }
+    .e-step-selected .e-indicator {
+      background: $step-completed-bg-color;
+    }
+    .e-step-valid .e-indicator {
+      background: $step-valid-completed-bg-color;
+      color: $step-valid-completed-color;
+    }
+    .e-step-error {
+      .e-indicator {
+        background: $step-error-completed-bg-color;
+        color: $step-error-icon-color;
+      }
+      .e-text,
+      .e-label {
+        color: $step-error-completed-color;
       }
     }
-
-    &.e-vertical .e-stepper-steps .e-step-container.e-step-text-only.e-step-text .e-step-label-optional,
-    &.e-vertical .e-stepper-steps .e-step-container.e-step-label-only.e-step-label .e-step-label-optional,
-    &.e-vertical .e-stepper-steps .e-step-container.e-step-icon:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
-    &.e-vertical.e-label-top .e-stepper-steps .e-step-container .e-step-label-optional,
-    &.e-vertical.e-label-bottom .e-stepper-steps .e-step-container .e-step-label-optional {
+    .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 {
+        color: $step-valid-icon-only-color;
+      }
+    }
+    .e-step-error.e-step-text-only,
+    .e-step-error.e-step-label-only {
+      .e-step-validation-icon {
+        color: $step-error-icon-only-color;
+      }
+    }
+    .e-text,
+    .e-label {
+      color: $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;
+      }
+    }
+    .e-step-label:not(.e-step-icon) .e-step-label-container {
+      background-color: $stepper-outline-color;
+    }
+    .e-step-text-container {
+      background-color: $stepper-outline-color;
+      border-color: transparent;
+    }
+    .e-step-disabled .e-indicator {
+      background: $step-disabled-bg-color;
+      color: $step-disabled-color;
+    }
+    .e-step-disabled .e-text,
+    .e-step-disabled .e-label,
+    .e-step-disabled .e-step-validation-icon {
+      color: $step-disabled-font-color;
+    }
+    &.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-label-top .e-step-label-optional,
+    &.e-vertical.e-label-bottom .e-step-label-optional {
       background-color: $stepper-outline-color;
     }
-
     .e-stepper-progressbar {
       background-color: $step-progress-bg-color;
-
       >.e-progressbar-value {
         background-color: $step-progress-value-bg-color;
       }
     }
-
-    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+    &:not(.e-steps-focus) .e-step-selected .e-step {
       box-shadow: $step-selected-li-shadow;
     }
-
-    .e-stepper-steps .e-step-container.e-step-focus .e-step,
-    .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
-    .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
-    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
-    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
-    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
-      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
-    }
-
-    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
-    .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
-    .e-stepper-steps .e-step-container.e-step-valid.e-step-label-only.e-step-focus .e-label,
-    .e-stepper-steps .e-step-container.e-step-valid.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-valid.e-step-template.e-step-focus {
+    .e-step-focus .e-step,
+    .e-step-label-only.e-step-focus .e-label,
+    .e-step-text-only.e-step-focus .e-text,
+    .e-step-template.e-step-focus,
+    &:not(.e-steps-focus) :focus-visible .e-step,
+    &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow;
+    }
+
+    &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
+    .e-step-valid.e-step-focus .e-step,
+    .e-step-valid.e-step-label-only.e-step-focus .e-label,
+    .e-step-valid.e-step-text-only.e-step-focus .e-text,
+    .e-step-valid.e-step-template.e-step-focus {
       box-shadow: $step-valid-li-shadow;
     }
 
-    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
-    .e-stepper-steps .e-step-container.e-step-error.e-step-focus .e-step,
-    .e-stepper-steps .e-step-container.e-step-error.e-step-label-only.e-step-focus .e-label,
-    .e-stepper-steps .e-step-container.e-step-error.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-error.e-step-template.e-step-focus {
+    &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
+    .e-step-error.e-step-focus .e-step,
+    .e-step-error.e-step-label-only.e-step-focus .e-label,
+    .e-step-error.e-step-text-only.e-step-focus .e-text,
+    .e-step-error.e-step-template.e-step-focus {
       box-shadow: $step-error-li-shadow;
     }
 
-    .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step,
-    .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-completed:not(.e-step-text-only):not(.e-step-label-only) .e-step,
-    &.e-steps-focus .e-stepper-steps .e-step-container:not(.e-step-focus).e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+    .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
+    .e-step-container:not(.e-step-focus).e-step-completed .e-step,
+    &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
       box-shadow: $step-li-shadow;
     }
 
-    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:hover,
-    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
-      border-color: $step-hover-border-color !important; /* stylelint-disable-line declaration-no-important */
+    .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
+      border-color: $step-hover-border-color;
     }
 
-    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-step:active,
-    .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
-      border-color: $step-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+    .e-step-notstarted:not(.e-step-disabled) .e-step:active,
+    .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
+      border-color: $step-active-border-color;
     }
 
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
-      background: $step-hover-color !important; /* stylelint-disable-line declaration-no-important */
+    &:not(.e-step-type-label) {
+      .e-indicator:hover,
+      .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-selected-hover-color;
+      }
     }
 
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
-      background: $step-active-color !important; /* stylelint-disable-line declaration-no-important */
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
+      color: $step-hover-not-text-color;
     }
 
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
-      &:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
-      &:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
-        color: $step-hover-text-color;
-        background: $step-selected-hover-color !important; /* stylelint-disable-line declaration-no-important */
+    &:not(.e-step-type-label) {
+      .e-step-selected .e-indicator:active,
+      .e-step-selected .e-step:active {
+        background: $step-selected-active-color;
       }
-      &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
-      &.e-step-valid:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
-        color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
-        background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+      .e-step-valid.e-step-selected .e-indicator:active,
+      .e-step-valid.e-step-selected .e-step:active {
+        background: $step-valid-completed-bg-color;
       }
-      &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
-      &.e-step-error:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
-        color: $step-hover-text-color !important; /* stylelint-disable-line declaration-no-important */
-        background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+      .e-step-error.e-step-selected .e-indicator:active,
+      .e-step-error.e-step-selected .e-step:active {
+        background: $step-error-completed-bg-color;
       }
     }
 
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:hover,
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container.e-step-notstarted:not(.e-step-text-only):not(.e-step-label-only) .e-step:hover {
-      color: $step-hover-not-text-color;
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
+      background: $step-hover-color;
     }
 
-    &:not(.e-step-type-label) .e-stepper-steps .e-step-container {
-      &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
-      &.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
-        background: $step-selected-active-color !important; /* stylelint-disable-line declaration-no-important */
-      }
-      &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
-      &.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
-        background: $step-valid-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
-      }
-      &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-indicator:active,
-      &.e-step-error.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step:active {
-        background: $step-error-completed-bg-color !important; /* stylelint-disable-line declaration-no-important */
+    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
+    &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
+      background: $step-active-color;
+    }
+
+    &:not(.e-step-type-label) {
+      .e-step-valid .e-indicator:hover,
+      .e-step-valid .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-valid-completed-bg-color;
+      }
+      .e-step-error .e-indicator:hover,
+      .e-step-error .e-step:hover {
+        color: $step-hover-text-color;
+        background: $step-error-completed-bg-color;
       }
     }
   }