@import 'mixins/mixins';
@import 'common/var';

@include b(timeflow-item) {
  position: relative;
  padding-bottom: 20px;

  @include e(wrapper) {
    position: relative;
    padding-left: 28px;
    top: 4px;
  }

  @include e(tail) {
    position: absolute;
    left: 4px;
    height: 100%;
    border-left: 2px dashed $--color-primary;
  }

  @include e(node) {
    position: absolute;
    background-color: $--color-white;
    font-size: 16px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -9px;
    width: $--timeline-node-size-normal;
    height: $--timeline-node-size-normal;

    @include m(achieved) {
      color: $--color-primary;
    }
    @include m(progress) {
      color: $--color-primary;
    }
    @include m(notAchieved) {
      color: #89868e;
    }
    @include m(fail) {
      color: $--color-danger;
    }
  }

  @include e(title) {
    width: 336px;
    color: $--color-text-regular;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2c2836;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @include e(timestamp) {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(44, 40, 54, 0.56);
    line-height: 20px;

    @include when(top) {
      margin: 2px 0;
    }
  }

  @include e(content) {
    width: 336px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(44, 40, 54, 0.76);
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}