@import "../common/variables";
@import "../common/mixins";

.@{css-prefix} {
  &-timeline {
    background-color: #fff;
    font-size: .65rem;
    color: #6e6e6e;
    overflow: hidden;
    position: relative;
    z-index: 1;
    &:after {
      .top-line(@line-color);
    }

    &-content {
      margin-left: 32rpx;
      border-left: 1px solid #E4E5E9;
    }

    &-item,
    &-custom-item {
      padding: 32rpx 24rpx 32rpx 0;
      margin-left: 32rpx;
      position: relative;
      &:not(:last-child):after {
        .bottom-line(@line-color);
      }

      .@{css-prefix}-timeline-icon {
        content: '';
        position: absolute;
        z-index: 1;
        left: -32rpx;
        display: block;
        top: 38rpx;
        transform: translate(-50%, 0);
      }

      &:first-child {
        margin-top: 32rpx;
        padding-top: 0;
        color: #000;
        > .@{css-prefix}-timeline-icon {
          top: 6rpx;
        }
      }

      &:last-child:before {
        content: '';
        width: 1px;
        height: 100%;
        background-color: #FFF;
        position: absolute;
        left: -34rpx;
        top: 38rpx;
      }
    }

    &-item {
      .@{css-prefix}-timeline-icon {
        width: 16rpx;
        height: 16rpx;
        border-radius: 198rpx;
        background-color: #E4E5E9;
      }
      &:first-child {
        > .@{css-prefix}-timeline-icon {
          background-color: #f23030;
          width: 20rpx;
          height: 20rpx;
        }
        &:before {
          content: '';
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          z-index: 0;
          top: 0;
          left: -48rpx;
          background-color: #FBBFBF;
          border-radius: 198rpx;
        }
      }
    }

    &-custom-item {
      &:first-child > .@{css-prefix}-timeline-icon {
        top: 0;
      }
    }
  }
}