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

  &-item {
    position: relative;
    padding: 0 0 $timeline-item-margin-bottom $timeline-item-margin-left;
    margin: 0;
    margin-left: $timeline-item-dot-size/2;
    list-style: none;
    border-left: $border-width-sm solid $gray-12;

    &:last-child {
      border-color: transparent;
    }

    &::before {
      position: absolute;
      top: 0;
      left: -$timeline-item-dot-size/2 - $border-width-sm/2;
      display: block;
      width: $timeline-item-dot-size;
      height: $timeline-item-dot-size;
      content: "";
      background-color: $gray-3;
      border-radius: 50%;
    }

    &--active {
      &::before {
        background-color: $brand-primary;
      }
    }

    &__content {
      position: relative;
      top: -($timeline-item-time-font-size - $timeline-item-dot-size)/2;
    }

    &__time {
      margin-bottom: $timeline-item-time-margin-bottom;
      font-size: $timeline-item-time-font-size;
      line-height: 1;
      color: $gray-11;
    }

    &__detail {
      font-size: $timeline-item-detail-font-size;
      color: $gray-9;
    }
  }
}