vuematerial/vue-material

.md-steppers {
  @include md-theme-component() {
    @include md-theme-property(background-color, background);
    @include md-theme-property(color, text-primary, background);


    .md-stepper-icon,
    .md-stepper-number,
    .md-stepper {
      &:after,
      &:before {
        @include md-theme-property(background-color, divider, background);
      }
    }

    .md-stepper-number {
      @include md-theme-property(background-color, text-hint, background);
      @include md-theme-property(color, text-primary, text-hint);

      svg {
        @include md-theme-property(color, text-primary, text-hint);
        @include md-theme-property(fill, text-primary, text-hint);
      }
    }

    .md-stepper-header {
      .md-button-content {
        @include md-theme-property(color, text-hint, background);

        &:after,
        &:before {
          @include md-theme-property(background-color, divider, background);
        }
      }

      &.md-active,
      &.md-done {
        .md-button-content {
          @include md-theme-property(color, text-primary, background);
        }

        .md-stepper-number {
          @include md-theme-property(background-color, primary, background);
          @include md-theme-property(color, text-primary, primary);

          svg {
            @include md-theme-property(color, text-primary, primary);
            @include md-theme-property(fill, text-primary, primary);
          }
        }
      }

      &.md-error {
        .md-button-content {
          @include md-theme-property-by-hue(color, red, A400, stepper, error);
        }

        .md-icon svg {
          @include md-theme-property-by-hue(color, red, A400, stepper, error);
          @include md-theme-property-by-hue(fill, red, A400, stepper, error);
        }
      }
    }
  }
}