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

@include export-module('co-stepper-theme') {
  .co-stepper {
    .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;
        }
      }
    }
    .stepper-button-wrapper {
      .co-button {
        color: $tp-co-stepper-step-button-color;
        background: $tp-co-stepper-step-button-background-color;
        .co-icon {
          svg { // for fontawesome icons
            fill: $tp-co-stepper-step-button-icon-color;
          }
          & [fill] { // for own icons
            fill: $tp-co-stepper-step-button-icon-color;
          }
        }
      }
    }
  }
}