// @import '../_utils.scss';

.#{$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;
      @include theme-border-left-color($__timeline-tail_border-left-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;
      @include theme-background-color($__timeline-head_background-color);
      border-radius: $timeline-item-head-border-radius;
      top: $timeline-item-head-top;
      border: 2px solid transparent;
      @include theme-border-color($__timeline-head_border-color);
      position: absolute;

      &-blue {
        border-color: $primary-color;
        @include theme-border-color($__timeline-head-info_border-color);
        color: $primary-color;
        @include theme-color($__timeline-head-info_font-color);
      }

      &-red {
        border-color: $error-color;
        @include theme-border-color($__timeline-head-error_border-color);
        color: $error-color;
        @include theme-color($__timeline-head-error_font-color);
      }

      &-green {
        border-color: $success-color;
        @include theme-border-color($__timeline-head-success_border-color);
        color: $success-color;
        @include theme-color($__timeline-head-success_font-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;
      @include theme-color($__timeline-content_font-color);
      @if $--size-switch == yes {
        font-size: $--size-font-size-base;
        @include computed-line-height();
      }
      a {
        @include theme-color($__common-a_font-color);
        &:hover {
          @include theme-color($__common-a_hover_font-color);
        }

        &:active {
          @include theme-color($__common-a_active_font-color);
        }
      }
    }

    &: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;
      @include theme-border-left-color($__timeline-tail_border-left-color);
    }
    .#{$timeline-prefix-cls}-item-content {
      min-height: $timeline-item-content-min-height;
    }
  }
}