.yc-timeline-item {
  position: relative;
  color: var(--color-text-1);
  font-size: 14px;
  &:not(:last-child),
  &.yc-timeline-item-reverse:last-child {
    .yc-timeline-item-dot-line {
      position: absolute;
      border-color: var(--color-neutral-3);
    }
  }
  .yc-timeline-item-dot-wrapper {
    position: absolute;

    .yc-timeline-item-dot-content {
      position: relative;

      .yc-timeline-item-dot-custom {
        position: absolute;
        top: 50%;
        left: 50%;
        display: inline-flex;
        color: rgb(var(--primary-6));
        background-color: var(--color-bg-1);
        transform: translateX(-50%) translateY(-50%);
        transform-origin: center;
      }

      .yc-timeline-item-dot {
        position: relative;
        width: 6px;
        height: 6px;
        color: rgb(var(--primary-6));
        border-radius: var(--border-radius-circle);

        &.yc-timeline-item-dot-solid {
          background-color: rgb(var(--primary-6));
        }
        &.yc-timeline-item-dot-hollow {
          background-color: var(--color-bg-1);
          border: 2px solid rgb(var(--primary-6));
        }
      }
    }
  }
  .yc-timeline-item-content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    .yc-timeline-item-content {
      color: var(--color-text-1);
      font-size: 14px;
      line-height: 1.5715;
    }
  }
  .yc-timeline-item-label {
    color: var(--color-text-3);
    font-size: 12px;
    line-height: 1.667;
  }
}
.yc-timeline-item-ghost {
  &.yc-timeline-item-direction-horizontal {
    .yc-timeline-item-dot-wrapper {
      .yc-timeline-item-dot-content {
        .yc-timeline-item-dot-custom {
          left: 0;
        }
      }
    }
  }
}
// direction
.yc-timeline-item-direction-vertical {
  min-height: 78px;
  &:not(:last-child),
  &.yc-timeline-item-reverse:last-child {
    .yc-timeline-item-dot-line {
      top: 18px;
      bottom: -4px;
      left: 50%;
      transform: translate(-50%);
      width: 1px;
      border-left-width: 1px;
    }
  }
  .yc-timeline-item-dot-wrapper {
    height: 100%;
    text-align: center;
    .yc-timeline-item-dot-content {
      width: 6px;
      height: 22px;
      line-height: 22px;
      .yc-timeline-item-dot {
        top: 50%;
        margin-top: -50%;
      }
    }
  }
}
.yc-timeline-item-direction-horizontal {
  flex: 1;
  &:not(:last-child),
  &.yc-timeline-item-reverse:last-child {
    .yc-timeline-item-dot-line {
      right: 4px;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      height: 1px;
      border-top-width: 1px;
    }
  }
  .yc-timeline-item-dot-wrapper {
    width: 100%;
    .yc-timeline-item-dot-content {
      height: 6px;
      line-height: 6px;
    }
  }
}
// reverser
.yc-timeline-item-reverse {
  &:first-child {
    .yc-timeline-item-dot-line {
      display: none;
    }
  }
}
// label-positon
.set-label-relative(@direction,@position) {
  &.yc-timeline-item-direction-@{direction} {
    &.yc-timeline-item-@{position} {
      margin-@{position}: if(@direction = vertical, 100px, 50px);
      .yc-timeline-item-label {
        @{position}: 0;
        & when(@position = left) {
          padding-right: 16px;
          transform: translateX(-100%);
        }
        & when(@position = right) {
          padding-left: 16px;
          transform: translateX(100%);
        }
        & when(@position = top) {
          padding-bottom: 16px;
          transform: translateY(-100%);
        }
        & when(@position = bottom) {
          padding-top: 16px;
          transform: translateY(100%);
        }
      }
      & when(@position = right) {
        .yc-timeline-item-content {
          text-align: right;
        }
      }
    }
  }
}
.yc-timeline-item-label-is-relative {
  .yc-timeline-item-label {
    position: absolute;
    top: 0;
    max-width: 100px;
  }
  &:not(.yc-timeline-item-alternate) {
    .set-label-relative(horizontal,top);
    .set-label-relative(horizontal,bottom);
    .set-label-relative(vertical,left);
    .set-label-relative(vertical,right);
  }
}
// 设置position
@positions: left, top, right, bottom;
each(@positions,.(@value,@key){
    .yc-timeline-item-@{value}{
      padding-@{value}: 6px;
      .yc-timeline-item-dot-wrapper {
        @{value}: 0;
      }
      .yc-timeline-item-content-wrapper {
        margin-@{value}: 16px;
      }
      & when(@value = right) {
        .yc-timeline-item-content,
        .yc-timeline-item-label {
          text-align: right;
        }
      }
    }
  });
