$tipIdxScale: 30px;

@mixin tipIdxBg($bgColor) {
  .tip-idx {
    background-color: $bgColor;
    border-color: darken($bgColor, 5%);
  }
}

@mixin tipIdxColor($color) {
  .tip-idx {
    border-color: $color;
    color: $color;
  }
}

.steps-container {
  display: flex;
  .line {
    height: 1px;
    flex: 1;
    background-color: #DDD;
    transform: translateY($tipIdxScale / 2);
    margin: 0 10px;
  }
  .step-item {
    word-break: break-all;
    .desc {
      color: #777;
      margin-top: 10px;
    }
    .tip-idx {
      width: $tipIdxScale;
      height: $tipIdxScale;
      line-height: $tipIdxScale - 2;
      font-size: 16px;
      display: inline-block;
      text-align: center;
      border-radius: 50%;
      background-color: #FFF;
      border: 2px solid #DDD;
      margin-right: 10px;
    }
    &.active {
      // @include tipIdxBg($themeColor);
      .tip-idx {
        box-shadow: inset 0 2px 2px rgba(#000, 0.1), 0 2px 2px rgba(#000, 0.1);
        // color: #FFF;
      }
      &.normal {
        @include tipIdxColor($themeColor);
      }
      &.success {
        @include tipIdxColor($green);
      }
      &.error {
        @include tipIdxColor($red);
      }
      &.wran {
        @include tipIdxColor($orange);
        .tip-idx {
          color: rgb(99, 89, 31);
        }
      }
    }
    &.checked {
      .tip-idx {
        background-color: $green;
        border-color: $green;
        color: #FFF;
      }
      &.success {
        @include tipIdxBg($green);
      }
      &.error {
        @include tipIdxBg($red);
      }
      &.wran {
        @include tipIdxBg($orange);
        .tip-idx {
          color: rgb(99, 89, 31);
        }
      }
    }
  }
}