@mixin stepper-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  .step, .last-step {
      background-color: #d6d6d6;
      border-left: 2px solid #000;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
      font-weight: bold;
      position: relative;
      color: #000;
      cursor: pointer;
  }

  .last-step {
    border-right: 2px solid #000;
}
.step:first-child:before {
    border-left:0;
}
.stepper {
  .active {
      background-color: mat-color($primary,100); //#3be8b0;
  }
}

.step:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 100%;
    width: 0;
    height: 0;
}

.step:before {
    top:21px; //50px / 2 - 4px
    border: 4px solid transparent;
    border-left-color: #000;
}

.sub-item{
  list-style-type: none;
  //cursor: pointer;
  font-size: 14px;
  color: #000;
  font-weight: normal;
}

.sub-item-left{
  margin-left: 20px;
}

.sub-item-right{
  margin-left: 0px;
}

button.next-button{
  background-color: #3be8b0;
  border: 2px solid;
  border-radius: 10px;
  height: 50px;
}
  // .stepper {
  //   .step {
  //     color: mat-color($foreground,base);

  //     &.step-circle {
  //       color: mat-color($primary,50);
  //       @include full-color(mat-color($background,disabled-button-toggle));

  //     }

  //     &.active,
  //     &.completed,
  //     &.current {
  //       cursor: pointer;

  //       &.step-circle {
  //         @include full-color(mat-color($accent,A200));
  //       }
  //     }

  //     &.active {
  //       .step-title {
  //         color: mat-color($accent,A200);
  //       }

  //     }
  //   }

  //   .mat-progress-bar {
  //     position: absolute;

  //     .mat-progress-bar-buffer {
  //       background-color: mat-color($background,disabled-button-toggle);
  //     }
  //   }
  //}
}
