@import "mixins/mixins";
@import "common/var";

@include b(timeline-item) {
  position: relative;
  padding-bottom: 43px;

  @include e(wrapper) {
    position: relative;
    padding-left: 24px;
    top: -4px;
    width: fit-content;
    // &--left {
    //   // left: -100%;
    //   @include e(content) {
    //     @include e(box) {
    //       align-items: flex-end;
    //     }
    //     @include e(img) {
    //       margin: 0 0 0 8px;
    //     }
    //   }
    // }
  }

  @include e(tail) {
    position: absolute;
    top: 10px;
    left: 4px;
    height: calc(100% - 14px);
    border-left: $--border-1 solid $--border-color-light;
  }

  @include e(icon) {
    color: $--timeline-node-color;
    position: absolute;
    font-size: $--font-size-extra-small;
    left: -1px;
  }

  @include e(node) {
    position: absolute;
    background-color: $--timeline-node-color;
    // border-radius: 50%;
    border-radius: $--border-radius-circle;
    display: flex;
    justify-content: center;
    align-items: center;

    @include m(normal) {
      left: 2px;
      width: $--timeline-node-size-normal;
      height: $--timeline-node-size-normal;
      top: 0;
    }
    @include m(large) {
      //left: -2px;
      //width: $--timeline-node-size-large;
      //height: $--timeline-node-size-large;
    }

    @include m(primary) {
      background-color: $--color-primary;
    }
    @include m(success) {
      background-color: $--color-success;
    }
    @include m(warning) {
      background-color: $--color-warning;
    }
    @include m(danger) {
      background-color: $--color-danger;
    }
    @include m(info) {
      background-color: $--color-info;
    }

    @include m(icon) {
      width: 9px;
      height: 9px;
    }
  }

  @include e(dot) {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include e(content) {
    color: $--color-text-primary;
    display: flex;
    align-items: flex-start;
    @include e(img) {
      width: 40px;
      height: 40px;
      margin: 0 8px 0 0;
      // border-radius: 2px;
      border-radius: $--border-radius-small;
    }
    @include e(box) {
      color: $--color-text-regular;
      display: flex;
      flex-direction: column;
      @include e(title) {
        font-size: $--font-size-base;
        font-weight: $--font-weight-400;
        line-height: 22px;
      }
      @include e(subText) {
        color: $--color-text-placeholder;
        line-height: 20px;
        font-size: $--font-size-extra-small;
      }
    }
  }

  @include e(timestamp) {
    color: $--color-text-placeholder;
    line-height: 20px;
    font-size: $--font-size-extra-small;
    // &.is-bottom {
    //   position: absolute;
    //   left: -83px;
    //   top: 4px;
    // }

    @include when(top) {
      margin-bottom: 4px;
      padding-top: 4px;
    }
    @include when(bottom) {
      //margin-top: 4px;
    }
  }

  .el-timeline-item_node__timestamp {
    position: absolute;
    left: -77px;
    top: -7px;
    color: $--color-text-placeholder;
    line-height: 20px;
    font-size: $--font-size-extra-small;
  }
}

@include b(timeline-item_horizontal) {
  padding-right: 40px;
  padding-bottom: 0;
  .el-timeline-item__wrapper {
    padding-left: 0;
    position: relative;
    top: 19px;
    right: 0;
  }
  @include e(tail) {
    position: absolute;
    width: calc(100% - 14px);
    // background: $--color-text-active;
    height: 1px;
    top: 2px;
    left: 12px;
    border-top: $--border-1 solid $--color-border-3;
  }
}