@include b(extend-action-timeline) {
  margin-top: 30px;

  @include b(extend-action-timeline-task) {
    position: relative;
    width: calc(100% - 52px);
    margin-left: 52px;
    @include e(top) {
      @include flex;

      padding-left: 35px;
      margin-bottom: 16px;
    }
    @include e(bottom) {
      min-height: 100px;
      padding-bottom: 20px;
      padding-left: 35px;
    }

    @include e(last-time) {
      flex: 1;
      padding-right: 16px;
      text-align: right;
      @include e(last-time-text) {
        display: inline-block;
        margin-left: 10px;
        font-size: 14px;
        color: #999;
      }
    }

    @include e(user-task-name) {
      width: 190px;
      margin-right: 35px;
      font-size: 18px;
      font-weight: bold;
      color: #2d8cf0;
    }

    @include e(head) {
      position: absolute;
      top: 3px;
      left: -9px;
      width: 22px;
      height: 22px;
      border: 2px solid #2d8cf0;
      border-radius: 50%;
    }

    @include e(tail) {
      position: absolute;
      top: 22px;
      width: 4px;
      height: calc(100% - 16px);
      background: #e8eaec;
    }

    @include e(author-name) {
      width: 140px;
      font-size: 18px;
      color: #666;
    }

    @include e(type) {
      width: 200px;
      font-size: 18px;
      color: #2d8cf0;
    }

    @include e(full-message) {
      font-size: 18px;
      color: #666;
    }

    @include when(wrong) {
      @include e(head) {
        border: 2px solid #ff686a;
      }
      @include e(user-task-name) {
        color: #ff686a;
      }
      @include e(type) {
        color: #ff686a;
      }
    }

    @include when(link) {
      @include e(author-name) {
        flex-grow: 1;
      }
    }
  }
  .#{bem('extend-action-timeline-task')} {
    &:nth-child(1) {
      .#{bem('extend-action-timeline-task','head')} {
        background-color: #fff;
        border: 2px solid #92a1b3;
      }
      .#{bem('extend-action-timeline-task','user-task-name')} {
        color: #70849d;
      }
    }

    &:nth-last-child(1) {
      .#{bem('extend-action-timeline-task','tail')} {
        background-color: transparent;
      }
    }
  }
}
