@timeline-item-prefix: ~'@{timeline-prefix}-item';

.@{timeline-item-prefix} {
  @node-size: 6px;
  @node-padding: 4px;
  position: relative;

  &.@{timeline-item-prefix}-left {
    display: flex;
    padding-bottom: 0;

    .@{timeline-item-prefix}-dot {
      position: relative;
    }

    .@{timeline-item-prefix}-label {
      margin-right: @icecream-gap-md-x;
    }

    .@{timeline-item-prefix}-wrapper {
      padding-bottom: 32px;
    }
  }

  &-icon {
    margin-top: 0;
    line-height: 0;
    transform: translate(-50%, -50%);
    background-color: #FFF;

    .@{timeline-item-prefix}-node {
      display: flex;
      justify-content: center;
      align-items: center;
      width: @node-size;
      height: @node-size;
      border-radius: 50%;

      &.@{timeline-item-prefix} {
        &-grey {
          background-color: @icecream-color-grey-8;
          border-color: @icecream-color-grey-8;
        }

        &-blue {
          background-color: @icecream-color-blue-6;
          border-color: @icecream-color-blue-6;
        }

        &-green {
          background-color: @icecream-color-green-6;
          border-color: @icecream-color-green-6;
        }

        &-red {
          background-color: @icecream-color-red-6;
          border-color: @icecream-color-red-6;
        }
      }
    }
  }

  &-label {
    .setFontSize(@icecream-font-size-sm);
    color: @icecream-color-grey-8;

    &.@{timeline-item-prefix}-top {
      padding-top: 2px;
      margin-bottom: @icecream-gap-xs / 2;
    }

    &.@{timeline-item-prefix}-bottom {
      margin-top: @icecream-gap-xs / 2;
    }
  }

  &.@{timeline-item-prefix}-vertical {

    &.@{timeline-item-prefix}-right {
      padding-bottom: 32px;
    }

    .@{timeline-item-prefix}-wrapper {
      position: relative;
      padding-left: @icecream-gap-md-x;
      top: -2px;
    }

    .@{timeline-item-prefix}-tail {
      position: absolute;
      left: 2px;
      height: 100%;
      border-left: 2px solid @icecream-color-grey-4;
      transform: scaleX(0.5);
    }

    .@{timeline-item-prefix}-icon {
      position: absolute;
      // (默认行高 - icon 高) / 2
      top: (22px - @node-size) / 2;
      left: @node-size / 2;
      padding: @node-padding 0;
    }
  }

  &.@{timeline-item-prefix}-horizontal {

    .@{timeline-item-prefix}-wrapper {
      padding: @icecream-gap-md 32px 0 (@node-padding + @node-size / 2);
    }

    .@{timeline-item-prefix}-tail {
      width: 100%;
      border-top: 2px solid @icecream-color-grey-4;
      transform: scaleY(0.5);
    }

    .@{timeline-item-prefix}-icon {
      position: absolute;
      top: 1px;
      left: 0;
      padding: 0 @node-padding;
    }
  }
}