@import "../../../style/mixin";
@import "./material-definition";

@include export-module('co-stepper-step-theme') {
  .stepper-step {
    &:not(.last):after {
      background-color: $tp-co-stepper-step-incomplete-background-color;
    }
    &:not(.last):before {
      background-color: $tp-co-stepper-step-complete-background-color;
    }
    .index {
      //background-color: $tp-co-stepper-step-incomplete-background-color;
      color: $tp-co-stepper-step-incomplete-background-color;
      border-color: $tp-co-stepper-step-incomplete-background-color;
    }
    .description {
      color: $tp-co-stepper-step-incomplete-description-color;
    }
    &.active {
      .index {
        background-color: $tp-co-stepper-step-active-background-color;
        color: $tp-co-stepper-step-active-color;
        border-color: $tp-co-stepper-step-active-background-color;
      }
      .description {
        color: $tp-co-stepper-step-description-color;
      }
    }
    &.complete {
      .index {
        background-color: $tp-co-stepper-step-complete-background-color;
        color: $tp-co-stepper-step-complete-color;
        border-color: $tp-co-stepper-step-complete-background-color;
      }
      .description {
        color: $tp-co-stepper-step-description-color;
      }
    }
  }
}