.#{$timeline-prefix-cls} {
  $root: #{&};
  list-style: none;
  margin: 0;
  padding: 0;
  &__item {
    $item: #{&};
    padding: 0 0 0.4rem;
    list-style: none;
    position: relative;

    &-tail {
      height: 100%;
      border-left: 0.02rem solid #B2B2B2;
      position: absolute;
      left: .08rem;
      top: .64rem;

      #{$item}:last-child &{
        border-color: transparent;
      }
    }
    &-time {
      color: $gray-10;
      font-size: $timeline-font-size-sm;
      line-height: .4rem;
      margin-bottom: .06rem;
    }
    i#{&}-icon {
      background-color: #b2b2b2;
      display: inline-block;
      border-radius: 50%;
      width: .16rem;
      height: .16rem;
    }
    &-node {
      position: absolute;
      top: .48rem;
      text-align: center;
      left: -0.21rem;
      width: 0.6rem;
      height: 0.6rem;

      &--success i.timeline__item-icon {
        background-color: $brand-success
      }
      
      &--danger i.timeline__item-icon {
        background-color: $brand-danger
      }

      &--warning i.timeline__item-icon {
        background-color: $brand-warning
      }

      &--info i.timeline__item-icon {
        background-color: $brand-info
      }

      &--success i.aid {
        color: $brand-success
      }
      
      &--danger i.aid {
        color: $brand-danger
      }

      &--warning i.aid {
        color: $brand-warning
      }

      &--info i.aid {
        color: $brand-info
      }
    }

    &-content {
      padding-left: .46rem;
      position: relative;
      top: .24rem;
      &-title {
        color: $black;
        font-size: $timeline-font-size-base;
        line-height: .45rem;
        margin-bottom: .1rem;
      }
      &-detail {
        color: #999;
        font-size: .28rem;
        line-height: .42rem;
      }
    }
  }
}