@import "./var";
.#{$prefix}step {
  counter-reset: step;
  font-size: 0;
  margin-top: -10px;
  color: $step-active-title-color;

  &__item {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-top: 10px;
  }

  &__num {
    width: $step-num-width;
    height:$step-num-height;
    background-color: $step-num-color-bg;
    border:2px solid $step-num-color-border;
    //background-image: url(../../assets/image/slice/svg/step-back-ok.svg);
    box-sizing: border-box;
    line-height: ($step-num-height - 4px);
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
    text-align: center;
    color: $step-num-color-text;
    vertical-align: top;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      left: ($step-num-width - 16px - 4px)/2;      ;
      top: ($step-num-height - 16px - 4px)/2; 
      background-image: url(../../assets/image/slice/svg/step-num.svg);
      background-color: transparent;
    }

    &::before {
      counter-increment: step;
      content: counter(step);
      font-size: 0;
    }

  }

  &__content {
    display: inline-block;
    vertical-align: middle;
    font-size: $step-font-size-l;
    padding-top: 4px;
  }
  
  &__title {
    font-weight: $step-title-weight;
    max-width: 10em;
  }

  &__arrow {
    width: 16px;
    height: 16px;
    content: "";
    display: inline-block;
    
    margin: 6px 30px 0;
    vertical-align: top;
    background-image: url(../../assets/image/slice/svg/step-arrow.svg?fill=#{$step-arrow-color});
  }

  &__description {
    font-size: $step-font-size;
    color: $step-color-text-label;
    line-height: 18px;
    margin-top: 10px;
    max-width: 15em;
  }
}
.#{$prefix}step__item.is-error{
  color:$color-error;
  .#{$prefix}step__num{
    border: none;
    background-color: $color-bg;
    &::before{
      display: none;
    }
    &::after{
      content:"";
      width:28px;
      height:28px;
      display: block!important;
      background-image: url(../../assets/image/slice/svg/step-stop.svg?fill=#{$icon-color-error});
      background-size: cover;
      top:0;
      left:0;
    }
  }
}
.#{$prefix}step__item.is-pending{
  color:$color-warning;
  .#{$prefix}step__num{
    border: none;
    background-color: $color-bg;
    &::before{
      display: none;
    }
    &::after{
      content:"";
      width:28px;
      height:28px;
      display: block!important;
      background-image: url(../../assets/image/slice/svg/waiting-info.svg?fill=#{$icon-color-warning});
      background-size: cover;
      top:0;
      left:0;
    }
  }
}

// 流程说明 2020-04:新版该class弃用，且表示只读
  .#{$prefix}step.#{$prefix}step--alternative {
    .#{$prefix}step {

      &__item {
        text-align: center;
        padding-right: 160px;

        &:last-of-type {
          padding-right: 0
        }

      }

      &__num {
        margin-right: 0;
        //background-image: url(../../assets/image/slice/svg/step-back-alternative.svg);
        background-color:$step-alternative-num-color-bg; 
        border-color:$step-alternative-num-color-border;

        &::after {
          display: none;
        }

        &::before {
          font-size: $step-font-size-xl;
          color: $step-alternative-num-color-text;
          font-weight: $font-weight-bold;
        }

      }

      &__content {
        display: block;
        margin-top: 10px;
      }

      &__arrow {
        width: 120px;
        height: 1px;
        content: "";
        display: inline-block;
        margin: 0 0 0 -140px;
        line-height: 1.2;
        position: absolute;
        left: 100%;
        top: 50%;
        background-image: url(../../assets/image/slice/svg/step-line.svg);
      }

      &__tips {
        position: absolute;
        left: 100%;
        top: 0;
        width: 120px;
        margin: 0 0 0 -140px;
        overflow: hidden;
        line-height: normal;
        font-size: $step-font-size;
        color: $step-color-text-label;
        word-wrap:break-word;
        word-break:break-word;
      }

      &__title {
        margin-top: 4px;
      }

    }
  }

   // 垂直步骤条 2020-04:新版该class弃用，且表示只读
  .#{$prefix}step.#{$prefix}step--vertical {
    .#{$prefix}step {

      &__item {
        display: flex;
        padding-bottom: 20px;
      }

      &__num {
        flex:none;
        vertical-align: top;
        //background-image: url(../../assets/image/slice/svg/step-back-alternative.svg);
        background-color:$step-vertical-num-color-bg;
        border-color: $step-vertical-num-color-border;

        &::after {
          display: none;
          //background-image: url(../../assets/image/slice/svg/step-num-dark.svg);
        }

        &::before {
          font-size: $step-font-size-xl;
          color: $step-vertical-num-color-text;
          font-weight: $font-weight-bold;
        }

      }

      &__content {
        flex:auto;
        vertical-align: top;

      }
      &__description{
        max-width: initial;
      }

      &__title {
        // margin-top: 4px;
        max-width: 100%;
      }

      &__arrow {
        height: 100%;
        width: 1px;
        vertical-align: middle;
        margin-left: 20px;
        margin-right: 30px;
        background-color: $step-vertical-arrow-color-bg;
        position: absolute;
        top: 22px;
        bottom: 0;
        left: -6px;
      }

    }
    
  }

  // 垂直步骤条·圆点

  .#{$prefix}step.#{$prefix}step--dot {

    .#{$prefix}step {

      &__item {
        display: flex;
        padding-bottom: 20px;
      }

      &__num {
        flex:none;
        vertical-align: top;
        width: 9px;
        height: 9px;
        margin-top: 8px;
        background-color: $step-dot-num-color-bg;

        &::after {
          display: none;
        }
      }

      &__content {
        flex:auto;
        vertical-align: top;
        padding-top: 0;
      }
      &__description{
        max-width: initial;
      }
      &__title {
        margin-top: 2px;
      }

      &__arrow {
        height: 100%;
        width: 1px;
        vertical-align: middle;
        margin-left: 20px;
        margin-right: 30px;
        background-color: $step-dot-arrow-color-bg;
        position: absolute;
        top: 11px;
        bottom: 0;
        left: -16px;
      }

    }

  }
// 2020-04:新的垂直步骤条
.#{$prefix}step.#{$prefix}step--vertical-new {
  .#{$prefix}step {

    &__item {
      display: flex;
      padding-bottom: 20px;
    }

    &__num {
      flex:none;
      vertical-align: top;
      // background-color: #e5f0ff;
      // border-color: #e5f0ff;
      //background-image: url(../../assets/image/slice/svg/step-back-alternative.svg);

      &::after {
        //display: none;
        background-image: url(../../assets/image/slice/svg/step-num.svg);
      }

      &::before {
        // font-size: 16px;
        // color: #006EFF;
        // font-weight: 700;
      }
    }
    &__content {
      flex:auto;
      vertical-align: top;

    }
    &__description{
      max-width: initial;
    }
    &__title {
      max-width: 100%;
    }

    &__arrow {
      height: 100%;
      width: 1px;
      vertical-align: middle;
      margin-left: 20px;
      margin-right: 30px;
      background-color: $step-vertical-arrow-color-bg;
      position: absolute;
      top: 22px;
      bottom: 0;
      left: -6px;
    }

  }
  
}
// 只读步骤条 ——2020.04:重新规划，深色为步骤，浅色为只读，为类兼容，后续这个只读类并不代表只读
.#{$prefix}step.#{$prefix}step--readonly{

  .#{$prefix}step__item{
    vertical-align: top;
  }
  .#{$prefix}step__content{
    padding-top:4px;
  }
  .#{$prefix}step__num{
    vertical-align: top;
    color: $step-readonly-num-color-text;
    background-color: $step-readonly-num-color-bg;
    border-color:$step-readonly-num-color-border;
    &::before{
      background-image: none;
      counter-increment: step;
      content: counter(step);
      font-size: $step-font-size-xl;
      color:$step-readonly-num-color-text;
      font-weight: $font-weight-bold;
      line-height: 24px;
    }
    &::after{
      background-image: none;
    }
  }
  .#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num{
    vertical-align: top;
  }
  .#{$prefix}step__arrow{
    vertical-align: top;
    margin-top:6px
  }
}
 

// // 2020-04:新的水平只读
// .tea-step.tea-step--readonly-new {
//   .tea-step {

//     &__item {
//       text-align: center;
//       padding-right: 160px;

//       &:last-of-type {
//         padding-right: 0
//       }

//     }

//     &__num {
//       margin-right: 0;
//       background-color: #e5f0ff;
//       border-color:#e5f0ff;
//       //background-image: url(../../assets/image/slice/svg/step-back-alternative.svg);

//       &::after {
//         display: none;
//       }

//       &::before {
//         font-size: 16px;
//         color: #006EFF;
//         font-weight: 700;
//       }

//     }

//     &__content {
//       display: block;
//       margin-top: 10px;
//     }

//     &__arrow {
//       width: 120px;
//       height: 1px;
//       content: "";
//       display: inline-block;
//       margin: 0 0 0 -140px;
//       line-height: 1.2;
//       position: absolute;
//       left: 100%;
//       top: 50%;
//       background-image: url(../../assets/image/slice/svg/step-line.svg);
//     }

//     &__tips {
//       position: absolute;
//       left: 100%;
//       top: 0;
//       width: 120px;
//       margin: 0 0 0 -140px;
//       overflow: hidden;
//       line-height: normal;
//       font-size: 12px;
//       color: #888;
//       word-break: break-word;
//     }

//     &__title {
//       margin-top: 4px;
//     }

//   }
// }

// // 2020-04: 新的垂直只读
// .tea-step.tea-step.tea-step--vertical-new.tea-step--readonly-new{
//   .tea-step__item {
//     text-align: left;
//     padding-right: 0px;

//     &:last-of-type {
//       padding-right: 0
//     }

//   }

//   .tea-step__num {
//     margin-right: 10px;
//     background-color: #e5f0ff;
//     border-color:#e5f0ff;
//     //background-image: url(../../assets/image/slice/svg/step-back-alternative.svg);

//     &::after {
//       display: none;
//     }

//     &::before {
//       font-size: 16px;
//       color: #006EFF;
//       font-weight: 700;
//     }

//   }
//   .tea-step__content {
//     display: block;
//     margin-top: 0px;
//   }
//   .tea-step__tips{
//     display: none;
//   }
//   .tea-step__title{
//     margin-top: 0;
//   }
//   .tea-step__arrow{
    
//   }
// }

// 步骤条内容不限制长度
.#{$prefix}step.#{$prefix}step--wrap-normal{
  .#{$prefix}step__title{
    max-width: initial;
  }
}
.#{$prefix}step.#{$prefix}step--itemactive{
  .#{$prefix}step__content{
    cursor: pointer;
  }
}
// 已完成和未完成的步骤状态处理
.#{$prefix}step__item.is-current ~ .#{$prefix}step__item  {
  color: $step-item-color-text-disabled;
  
}
.#{$prefix}step__item.is-current .#{$prefix}step__num::before{
   
    color:$step-num-color-text;
   
}
.#{$prefix}step__item.is-current .#{$prefix}step__num::before,
.#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num::before {
    font-size: $step-font-size-xl;
    // line-height: 26px;
    font-weight: $step-title-weight;
    
}
.#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}link-external{
  color:$step-color-text-label;
  &::after{
    background-image:url(../../assets/image/slice/svg/external-link-icon.svg?fill=#{$icon-color-default});
  }
}
.#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__item {
  color: $step-item-color-text-disabled;
}
.#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num {
    //background-image: url(../../assets/image/slice/svg/step-back.svg);
    border:2px solid $step-num-color-border-disabled;
    background-color: $step-num-color-bg-disabled;
    //vertical-align: middle;
    color: $step-num-color-disabled;
}
.#{$prefix}step__item.is-current .#{$prefix}step__num:after,
.#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num:after{
    display: none;
}


.#{$prefix}step.#{$prefix}step--alternative .#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num{
    //background-image: url(../../assets/image/slice/svg/step-back-alternative.svg);
    background-color:$step-alternative-num-color-bg-disabled;
    border-color: $step-alternative-num-color-border-disabled;
    margin-right: 0;
}

.#{$prefix}step.#{$prefix}step--vertical .#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num::before {
    color:$step-item-color-text-disabled;
}

.#{$prefix}step.#{$prefix}step--dot .#{$prefix}step__item.is-current .#{$prefix}step__num:before,
.#{$prefix}step.#{$prefix}step--dot .#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num:before {
    font-size: 0;
}
.#{$prefix}step.#{$prefix}step--dot .#{$prefix}step__item.is-current ~ .#{$prefix}step__item .#{$prefix}step__num{
    background-color:$step-dot-num-color-bg-disabled;
    border-color:$step-dot-num-color-border-disabled;
}
.#{$prefix}step.#{$prefix}step--dot .#{$prefix}step__item.is-current .#{$prefix}step__num{
    background-color: $color-bg;
    background-image: none;
    border: 2px solid $color-primary;
}