$timeline-prefix-cls: "#{$css-prefix}timeline";

.#{$timeline-prefix-cls} {
  list-style: none;
  margin: $timeline-margin;
  padding: $timeline-padding;

  &-item {
    margin: $timeline-item-margin !important;
    padding: $timeline-item-padding;
    list-style: none;
    position: relative;

    &-tail {
      height: $timeline-item-tail-height;
      border-left: 2px solid $timeline-color;
      position: absolute;
      left: $timeline-item-tail-left;
      top: $timeline-item-tail-top;
    }

    &-pending &-tail {
      display: none;
    }

    &-head {
      width: $timeline-item-head-width;
      height: $timeline-item-head-height;
      background-color: $timeline-item-head-background-color;
      border-radius: $timeline-item-head-border-radius;
      top: $timeline-item-head-top;
      border: 2px solid transparent;
      position: absolute;

      &-blue {
        border-color: $primary-color;
        color: $primary-color;
      }

      &-red {
        border-color: $error-color;
        color: $error-color;
      }

      &-green {
        border-color: $success-color;
        color: $success-color;
      }
    }

    &-head-custom {
      width: $timeline-item-head-custom-width;
      height: auto;
      margin-top: $timeline-item-head-custom-margin-top;
      padding: $timeline-item-head-custom-padding;
      text-align: center;
      line-height: 1;
      border: $timeline-item-head-custom-border;
      border-radius: 0;
      font-size: $font-size-base;
      position: absolute;
      left: $timeline-item-head-custom-left;
      transform: translateY(-50%);

      & i.icon-jiangbei {
        font-size: $timeline-item-head-custom-i-font-size;
      }
    }

    &-content {
      padding: $timeline-item-content-padding;
      font-size: $font-size-small;
      position: relative;
      top: -3px;

      & .time {
        // font-family: "PingFangSC-Medium";
        font-weight: bold;//*************************************
        font-size: 12px;//*************************************
        line-height: 20px;//*************************************
      }

      & .content {
        font-size: 12px;//*************************************
        line-height: 20px;//*************************************
      }
    }

    &:last-child {
      .#{$timeline-prefix-cls}-item-tail {
        display: none;
      }
    }
  }
  // :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
  &.#{$timeline-prefix-cls}-pending &-item:nth-last-of-type(2) {
    .#{$timeline-prefix-cls}-item-tail {
      border-left: 2px dotted $timeline-color;
    }
    .#{$timeline-prefix-cls}-item-content {
      min-height: $timeline-item-content-min-height;
    }
  }
}