.steps-wizard {
  position: relative;
  .close-wizard {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
  }
  .steps-wizard-header {
    padding: 96px 24px 96px 24px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: -1;
    min-height: 264px;
  }

  .wizard-header-content{
    opacity: 0;
    transition: opacity 350ms ease-in-out;
  }
  .mat-horizontal-stepper-content[aria-expanded="true"]{
    .wizard-header-content{
      opacity: 1;
    }
  }

  .mat-horizontal-stepper-header {
    display: block;
    text-align: center;
    padding: 0;
    width: 136px;
    height: auto;

    .mat-step-icon {
      margin: 0 auto;
      height: 36px;
      width: 36px;
      background-color: var(--color-surface-neutral-default);
      color: var(--color-on-surface-alternative);
      font-weight: var(--font-weights-700);
      box-shadow: var(--elevation-low);
      position: relative;
      z-index: 2;
      span {
        padding-top: 4px;
        vertical-align: top;
        display: block;
      }

      .uil {
        margin-top: 6px;
        display: block;
      }
    }

    .mat-step-icon-selected,
    .mat-step-icon-state-edit {
      background-color: var(--color-surface-alt-default);
    }

    .mat-step-text-label {
      font-size: var(--font-sizes-small);
      margin-top: 10px;
      color: var(--color-on-surface-neutral);
    }

    .mat-step-label-selected,
    .mat-step-label-active {
      .mat-step-text-label {
        color: var(--color-on-surface-default);
      }
    }
  }

  .mat-stepper-horizontal-line {
    margin: -28px -51px 0 -51px;
    height: 8px;
    background: transparent;
    border: none;
    width: 0;
    transform: translateX(-100%);
  /*  transition: transform .5s ease-out;*/
    position: relative;
    z-index: 1;
  }

  .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,
  .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,
  [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after,
  [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before {
    width: 0 !important;
  }

  .mat-step-header .mat-step-header-ripple {
    display: none;
  }

  @mixin styleStepLine($index) {
    .mat-horizontal-stepper-header {
      & + .mat-stepper-horizontal-line:nth-child(#{$index}) {
        background: var(--color-surface-alt-default);
        transform: translateX(0);
      }
    }
  }
    .mat-horizontal-stepper-header:first-of-type:before{
      position: absolute;
      left: 0;
      height: 8px;
      background-color: var(--color-surface-alt-default);
      content: '';
      width: 50%;
      top: 16px;
    }

  .last-edited-step-0{
    &.mat-stepper-horizontal{
      padding-top: 384px;
    }
  }
  .mat-stepper-horizontal{
    padding-top: 248px;
    /*transition: padding-top 500ms cubic-bezier(0.79, 0.33, 0.14, 0.53);*/
  }
  .last-edited-step-1 {
    @include styleStepLine(2);
    .mat-horizontal-stepper-header:nth-of-type(1){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }

  .last-edited-step-2 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    .mat-horizontal-stepper-header:nth-of-type(-n + 2){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }

  .last-edited-step-3 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    .mat-horizontal-stepper-header:nth-of-type(-n + 3){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }

  .last-edited-step-4 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    @include styleStepLine(8);
    .mat-horizontal-stepper-header:nth-of-type(-n + 4){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }

  .last-edited-step-5 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    @include styleStepLine(8);
    @include styleStepLine(10);
    .mat-horizontal-stepper-header:nth-of-type(-n + 5){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }

  .last-edited-step-6 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    @include styleStepLine(8);
    @include styleStepLine(10);
    @include styleStepLine(12);
    .mat-horizontal-stepper-header:nth-of-type(-n + 6){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }

  .last-edited-step-7 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    @include styleStepLine(8);
    @include styleStepLine(10);
    @include styleStepLine(12);
    @include styleStepLine(14);
    .mat-horizontal-stepper-header:nth-of-type(-n + 7){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }
  .last-edited-step-8 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    @include styleStepLine(8);
    @include styleStepLine(10);
    @include styleStepLine(12);
    @include styleStepLine(14);
    @include styleStepLine(16);
    .mat-horizontal-stepper-header:nth-of-type(-n + 8){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }
  .last-edited-step-9 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    @include styleStepLine(8);
    @include styleStepLine(10);
    @include styleStepLine(12);
    @include styleStepLine(14);
    @include styleStepLine(16);
    @include styleStepLine(18);
    .mat-horizontal-stepper-header:nth-of-type(-n + 9){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }
  .last-edited-step-10 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleStepLine(6);
    @include styleStepLine(8);
    @include styleStepLine(10);
    @include styleStepLine(12);
    @include styleStepLine(14);
    @include styleStepLine(16);
    @include styleStepLine(18);
    @include styleStepLine(20);
    .mat-horizontal-stepper-header:nth-of-type(-n + 10){
      .mat-step-icon {
        background-color: var(--color-surface-alt-default);
      }
    }
  }
}

.steps-wizard .close-wizard {
  z-index: 1 !important;
}