@import './group.less';
@import './cell.less';

@w2: 75rem;
.radius(@radius: 2/@w) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
}

.steps {
  padding-bottom: 30/@w2;
  .steps_item {
    position: relative;
    padding: 30/@w2;
    &:before {
      left: 80/@w2;
    }
  }
  .step_status {
    background-color: #eee;
    width: 36/@w2;
    margin-right: 24/@w2;
    i.status_line {
      position: absolute;
      left: 48/@w2;
      top: 0;
      bottom:0;
      width: 1px;
      transform: translateX(-50%);
      background-color: #BEBEBE;
    }
    i.status_line_blue {
      background-color: #5890FF;
    }
    i.icon {
      position: absolute;
      left: 37/@w2;
      top: 37/@w2;
      width: 24/@w2;
      height: 24/@w2;
      .radius(50%);
    }
    i.original {
      left: 42/@w2;
      top: 42/@w2;
      width: 12/@w2;
      height: 12/@w2;
      background-color: #BEBEBE;
    }
    i.status_ok {
      background-color: #5890FF;
      &:after {
        content: " ";
        position: absolute;
        left: 5/@w2;
        top: 6/@w2;
        width: 10/@w2;
        height: 6/@w2;
        border-left: 3/@w2 solid #fff;
        border-bottom: 3/@w2 solid #fff;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
      }
    }
    i.status_no {
      box-shadow: 0 0 0 6/@w2 #FDB2B2;
      -webkit-box-shadow: 0 0 0 6/@w2 #FDB2B2;
      background-color: #FB3F3F;
      transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      &:before{
        content: " ";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16/@w2;
        height: 4/@w2;
        background-color: #fff;
        transform: translate(-50%, -50%);
      } 
      &:after {
        content: " ";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4/@w2;
        height: 16/@w2;
        background-color: #fff;
        transform: translate(-50%, -50%);
      }
    }
    i.status_waiting {
      box-shadow: 0 0 0 6/@w2 #CDDDFF;
      -webkit-box-shadow: 0 0 0 6/@w2 #CDDDFF;
      background-color: #5890FF;
    }
  }
  .steps_item:first-child {
    i.status_line {
      top: 42/@w2; // height: calc(100% - 200/@w2);
    }
  }
  .steps_item:last-child {
    i.status_line {
      height: 42/@w2;
    }
  }
  .step_info {
    font-size: 26/@w2;
    line-height: 40/@w2;
    color: #9a9a9a;
    .step_title_info {
      padding-bottom: 5/@w2;
    }
    .step_title {
      color: #000;
    }
    .step_frKey {
      float: right;
    }
    .i_phone {
      color: #5890ff;
    }
  }
}