@use './mixins/mixins.scss' as *;
@use './variables.scss' as *;

@include b(time-line-data) {
  position: relative;
  width: 100%;
  display: flex;
  margin-top: 30rpx;

  @include when(line) {
    &::before {
      content: ' ';
      position: absolute;
      left: calc(#{$itemDotWidth} / 2);
      top: $itemDotWidth;
      width: 2rpx;
      height: calc(100% - (#{$itemDotWidth} / 2));
      background-color: $lineColor;
      // background-color: red;
      transform: translateX(-50%);
    }
    &:last-of-type {
      &::before {
        height: calc(100% - #{$itemDotWidth} * 2 / 3);
      }
    }
  }

  @include e(dot) {
    flex-grow: 0;
    flex-shrink: 0;
    width: $itemDotWidth;
    height: $itemDotWidth;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @include e(content) {
    flex-grow: 1;
    margin-top: 6rpx;
    padding-left: $dotDataSpacing;
  }
}