.haloe-timeline-wrapper {

  .haloe-timeline {
    list-style: none;
    margin: 0;
    padding: 0;

    &-item {
      margin: 0 !important;
      list-style: none;
      position: relative;
      display: flex;
      flex-direction: column;

      &-tail {
        height: calc(~"100% - 23px");
        border-left: 1px solid @color-complementary-7;
        position: absolute;
        transform: translateX(2.45px);
        top:20px;
        left: 1px;
      }

      &-pending &-tail {
        display: none;
      }

      &-head {
        width: 8px;
        height: 8px;
        background-color: @color-bg-card;
        border-radius: 50%;
        border: 2px solid transparent;
        position: absolute;
        margin-top: 4px;

        &-pending {
          width: 8px;
          height: 8px;
          background-color: @color-bg-card;
          position: absolute;
          margin-top: 4px;
          margin-left: -3px;
        }

        &-blue {
          border-color: @primary-color;
          color: @primary-color;
        }

        &-red {
          border-color: @error-color;
          color: @error-color;
        }

        &-green {
          border-color: @success-color;
          color: @success-color;
        }
      }

      &-head-custom {
        width: 16px;
        height: 16px;
        margin-top: 6px;
        margin: 6px 0px 0px 9px;
        padding: 3px 0;
        text-align: center;
        line-height: 1;
        border: 0;
        border-radius: 0;
        font-size: @font-size-base;
        position: absolute;
        left: -13px;
        transform: translateY(-50%);
      }

      &-content {
        padding: 1px 1px 0px 16px;
        font-size: @font-size-large;
        position: relative;
        top: -5px;
      }

      &-time {
        font-size: 14px;
        font-weight: 400;
        color: @font-600;
      }

      &:last-child .haloe-timeline-item-tail {
        display: none;
      }

      &-expand {
        background-color: @color-bg-card;
        border-left: 1px dashed @color-complementary-7;
        flex: 1;
        padding-bottom: 12px;
        transform: translateX(2.45px);
        z-index: 1;

        &-content {
          padding-left: 16px;
        }
      }

      &-expand-opacity {
        opacity: 0;

        .haloe-btn {
          cursor: default;
        }
      }

      &-bottom {
        height: 4px;
        background-color: @color-bg-card;
        z-index: 1;
      }
    }

    // &.haloe-timeline-pending .haloe-timeline-item:nth-last-of-type(2) {

    //   .haloe-timeline-item-tail {
    //     border-left: 2px dotted @color-border-disable;
    //   }

    //   .haloe-timeline-item-content {
    //     min-height: 48px;
    //   }
    // }

    &.haloe-timeline-pending .haloe-timeline-item:last-child {

      .haloe-timeline-item-head {
        border-radius:100%;
        border-bottom: none;
        border-width: 1px;
        animation: rotate 0.75s 0s linear infinite;
      }

    }

    &.haloe-timeline-separate {

      .haloe-timeline-item-head {
        left: 51%;
      }

      .haloe-timeline-item-tail {
        left: 51%;
      }

      .haloe-timeline-item{
        .haloe-timeline-item-content {
          left: 51%;
          text-align: left;
        }
      }

      .haloe-timeline-item:nth-child(odd){
        .haloe-timeline-item-content {
          left: -51%;
          text-align: right;
        }
      }
    }

    &.haloe-timeline-alternate {

      .haloe-timeline-item-alternate {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative;
        padding-bottom: 20px;

        .haloe-timeline-item-time-left {
          width: calc(~"50% - 5px");
          text-align: right;
          padding-right: 20px;
          font-size: 14px;
          font-weight: 400;
          color: @font-600;
          box-sizing: border-box;
          line-height: 1;
          padding-top: 2px;
        }

        .haloe-timeline-item-tail {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          height: calc(~"100% - 8px");
          top: 12px;
        }

        .haloe-timeline-item-head {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 2px;
          z-index: 1;
        }

        .haloe-timeline-item-head-custom {
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          top: 6px;
          z-index: 1;
        }

        .haloe-timeline-item-content {
          width: calc(~"50% - 5px");
          padding: 0 0 0 20px;
          top: 0;
          box-sizing: border-box;
        }

        .haloe-timeline-item-bottom {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 0;
          height: 4px;
          z-index: 1;
        }
      }
    }

  }
  &.haloe-timeline-wrapper-horizontal {
    display: flex;

    .haloe-timeline-scroller-wrapper {
      width:500px;
      overflow:hidden;
    }

    .haloe-timeline.haloe-timeline-horizontal {
      position: relative;
      left:-2px;
      top: -5px;
      padding-bottom:20px;
      width:max-content;
      white-space: nowrap;
      overflow: hidden;
      z-index:-10;
      display: flex;

      .haloe-timeline-item {
        padding: 0 12px;
        padding-top: 15px;
        width:max-content;
        position: relative;

        .haloe-timeline-item-tail {
          border-left:0;
          // width:100%;
          border-top: 1px solid @color-complementary-7;
          left:12px;
          top:50%;
          right:12px;
        }

        .haloe-timeline-item-head {
          top:47%;
          left:50%;
          transform: translateY(-50%);

          &.haloe-timeline-item-head-no-scroll {
            left: 0;
          }
        }

        .haloe-timeline-item-content {
          padding:0;
          position: relative;
          top: 44px;
          left:-1px;
          z-index:10;

          &.haloe-timeline-item-content-no-scroll {
            left: -10px;
            text-align: left;
          }
        }

        &:last-child .haloe-timeline-item-tail{
          display: block;

          &.haloe-timeline-item-tail-no-scroll {
            display: none;
          }
        }
      }

      &.haloe-timeline-pending .haloe-timeline-item:nth-last-of-type(2) {

        .haloe-timeline-item-content {
          min-height: auto;
        }
      }

      &.haloe-timeline-pending .haloe-timeline-item:last-child {

        .haloe-timeline-item-head {
          border-radius:100%;
          border-bottom: none;
          animation: rotate 0.75s 0s linear infinite;
          transform: none;
          top: 30%;
        }
  
      }

      &.haloe-timeline-separate .haloe-timeline-item:nth-child(odd){

        .haloe-timeline-item-content {
          top: -10px;
        }
      }

      &.haloe-timeline-alternate .haloe-timeline-item-alternate {

        .haloe-timeline-item-time-left {
          display: none;
        }

        .haloe-timeline-item-tail {
          border-left: 0;
          border-top: 1px solid @color-complementary-7;
          left: 12px;
          top: 50%;
          right: 12px;
        }

        .haloe-timeline-item-head {
          top: 47%;
          left: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }

        .haloe-timeline-item-content {
          padding: 0;
          position: relative;
          top: 44px;
          left: -1px;
          z-index: 10;
        }

        .haloe-timeline-item-bottom {
          display: none;
        }
      }

      &.haloe-timeline-alternate .haloe-timeline-item-alternate:nth-child(odd) {
        .haloe-timeline-item-content {
          top: -10px;
        }
      }
    }
  }
}