.yc-timeline {
  display: flex;
  flex-direction: column;
}
// dir
.yc-timeline-direction-horizontal {
  flex-direction: row;
}
// reverse
.yc-timeline-reverse {
  flex-direction: column-reverse;
  &.yc-timeline-direction-horizontal {
    flex-direction: row-reverse;
  }
  .yc-timeline-item-direction-vertical {
    &:first-child {
      .yc-timeline-item-dot-line {
        display: none;
      }
    }
    &:last-child {
      .yc-timeline-item-dot-line {
        position: absolute;
        top: 18px;
        bottom: -4px;
        left: 50%;
        transform: translate(-50%);
        width: 1px;
        border-left-width: 1px;
        border-color: var(--color-neutral-3);
      }
    }
  }
}
// alternate
.yc-timeline-alternate {
  &.yc-timeline-direction-vertical {
    .yc-timeline-item {
      &:nth-child(2n) {
        margin-right: calc(50% - 6px);
      }
      &:nth-child(2n + 1) {
        margin-left: 50%;
      }
    }
  }
  &.yc-timeline-direction-horizontal {
    min-height: 200px;
    align-items: center;
    .yc-timeline-item {
      &:nth-child(2n) {
        transform: translateY(calc(-50% + 6px));
      }
      &:nth-child(2n + 1) {
        transform: translateY(calc(50%));
      }
    }
  }
}
