/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import 'token.less';
@import '../../style/mixins/index';

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

.@{timeline-prefix-cls} {
  .reset-component;
  margin: 0;
  padding: 0 4px;
  overflow: hidden;
  list-style: none;

  .@{timeline-item-prefix-cls} {
    .reset-component;
    position: relative;
    margin: 0;
    padding-bottom: @timeline-item-padding-bottom;
    font-size: @timeline-content-font-size-small;

    &-tail {
      position: absolute;
      left: calc((@timeline-dot-size - 1px) / 2);
      height: calc(100% - @timeline-dot-size * 2 + 4px);
      border-left: @timeline-width solid @timeline-line-color;
    }

    &.pending .@{timeline-item-prefix-cls}-dot {
      font-size: @timeline-content-font-size-small;
    }

    &.pending .@{timeline-item-prefix-cls}-tail {
      display: none;
    }

    &-dot {
      box-sizing: border-box;
      position: absolute;
      width: @timeline-dot-size;
      height: @timeline-dot-size;
      border-radius: 50%;
      transform: translateY(-50%);

      &.blue {
        color: @timeline-finished-color;
        background-color: @timeline-finished-color;
      }

      &.red {
        color: @timeline-error-color;
        background-color: @timeline-error-color;
      }

      &.green {
        color: @timeline-success-color;
        background-color: @timeline-success-color;
      }

      &.gray {
        color: @timeline-disabled-color;
        background-color: @timeline-disabled-color;
      }
    }

    &-dot.custom {
      position: absolute;
      left: calc(@timeline-dot-size / 2);
      width: auto;
      height: auto;
      margin-top: 0;
      padding: 1px;
      line-height: 1;
      text-align: center;
      border: 0;
      border-radius: 0;
      transform: translate(-50%, -50%);
      background-color: transparent !important;
    }

    &-content {
      position: relative;
      margin: 0 0 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap);
      word-break: break-word;
      color: @timeline-content-color-text;
      max-width: @timeline-content-max-width;
      min-width: @timeline-content-min-width;

      > * {
        margin: 0;
        padding: 0;
      }
    }

    &.last {
      > .@{timeline-item-prefix-cls}-tail {
        display: none;
      }
      > .@{timeline-item-prefix-cls}-content {
        min-height: 48px;
      }
    }
  }

  &.alternate {
    .@{timeline-item-prefix-cls} {
      &-tail,
      &-dot,
      &-dot.custom {
        left: 50%;
      }

      &-dot {
        margin-left: calc(-1 * (@timeline-dot-size - 1px) / 2);

        &.custom {
          margin-left: 1px;
        }
      }

      &:nth-child(2n + 1) {
        .@{timeline-item-prefix-cls}-content {
          left: calc(50% - 4px);
          width: calc(50% - 24px);
          text-align: left;
        }
      }

      &:nth-child(2n) {
        .@{timeline-item-prefix-cls}-content {
          width: calc(50% - 24px);
          margin: 0;
          text-align: right;
        }
      }
    }
  }

  &.right {
    .@{timeline-item-prefix-cls} {
      &-tail,
      &-dot,
      &-dot.custom {
        left: auto;
        right: 4.5px;
      }

      &-dot {
        margin-right: calc(-1 * (@timeline-dot-size - 1px) / 2);

        &.custom {
          margin-right: -18px;
        }
      }
      .@{timeline-item-prefix-cls}-content {
        left: 0;
        text-align: right;
        margin: 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap) 0 0;
        width: auto;
      }
    }
  }

  &.label {
    &.left {
      .@{timeline-item-prefix-cls} {
        &-tail,
        &-dot,
        &-dot.custom {
          left: calc((2 * @timeline-gap) + (@timeline-dot-size / 2));
        }

        &-dot {
          margin-left: calc(-1 * (@timeline-dot-size - 1px) / 2);

          &.custom {
            margin-left: 1px;
          }
        }
        .@{timeline-item-prefix-cls}-label {
          position: absolute;
          text-align: right;
          color: @timeline-label-color-text;
        }
        .@{timeline-item-prefix-cls}-content {
          left: calc(@timeline-dot-size + 7.5px);
          text-align: left;
          margin-right: 16px;
        }
      }
    }
    &.right {
      .@{timeline-item-prefix-cls} {
        &-tail,
        &-dot,
        &-dot.custom {
          left: auto;
          right: calc((2 * @timeline-gap) + (@timeline-dot-size / 2));
        }

        &-dot {
          margin-right: calc(-1 * (@timeline-dot-size - 1px) / 2);

          &.custom {
            right: calc(-1 * (@timeline-dot-size - 1px) / 2);
          }
        }
        .@{timeline-item-prefix-cls}-label {
          position: absolute;
          right: 0;
          text-align: left;
        }
        .@{timeline-item-prefix-cls}-content {
          left: auto;
          right: calc(@timeline-dot-size + 7.5px);
          text-align: right;
          margin-left: 17px;
        }
      }
    }
    &.alternate {
      .@{timeline-item-prefix-cls} {
        &:nth-child(2n + 1) {
          .@{timeline-item-prefix-cls}-label {
            position: absolute;
            width: calc(50% - 18px);
            text-align: right;
          }
        }
        &:nth-child(2n) {
          .@{timeline-item-prefix-cls}-label {
            position: absolute;
            left: calc(50% + (2 * (@timeline-dot-size - @timeline-width) + @timeline-gap) - @timeline-dot-size / 2);
            width: calc(50% - (2 * (@timeline-dot-size - @timeline-width) + @timeline-gap) + @timeline-dot-size / 2);
            text-align: left;
          }
        }
      }
    }
  }

  &.pending .@{timeline-item-prefix-cls}.last .@{timeline-item-prefix-cls}-tail {
    display: block;
    height: calc(100% - 14px);
    border-left: 1px dotted @timeline-line-color;
  }

  &.reverse .@{timeline-item-prefix-cls}.last .@{timeline-item-prefix-cls}-tail {
    display: none;
  }

  &.reverse .@{timeline-item-prefix-cls}.pending {
    .@{timeline-item-prefix-cls}-tail {
      display: block;
      height: calc(100% - 15px);
      border-left: 1px dotted @timeline-line-color;
    }
    .@{timeline-item-prefix-cls}-content {
      min-height: 48px;
    }
  }
}
.@{timeline-prefix-cls}-rtl {
  direction: rtl;
  .@{timeline-item-prefix-cls} {
    &-tail {
      right: calc((@timeline-dot-size - 1px) / 2);
      left: auto;
      border-left: @timeline-width solid @timeline-line-color;
    }
    &-content {
      margin: 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap) 0 0;
      text-align: right;
    }
    &-dot.custom {
      right: calc(@timeline-dot-size / 2);
      left: auto;
      transform: translate(50%, -50%);
    }
  }
  &.@{timeline-prefix-cls} {
    &.alternate {
      .@{timeline-item-prefix-cls} {
        &-tail,
        &-dot,
        &-dot.custom {
          right: 50%;
          left: auto;
        }
        &-dot {
          margin-left: 0;
          margin-right: calc(-1 * (@timeline-dot-size - 1px) / 2);
          &.custom {
            margin-right: 1px;
            margin-left: 0;
          }
        }

        &:nth-child(2n + 1) {
          .@{timeline-item-prefix-cls}-content {
            right: calc(50% - 4px);
            left: auto;
            text-align: right;
          }
        }

        &:nth-child(2n) {
          .@{timeline-item-prefix-cls}-content {
            text-align: left;
          }
        }
      }
    }
    &.right {
      .@{timeline-item-prefix-cls} {
        &-tail,
        &-dot,
        &-dot.custom {
          right: auto;
          left: 4.5px;
        }

        &-dot {
          margin-left: calc(-1 * (@timeline-dot-size - 1px) / 2);
          margin-right: 0;
          &.custom {
            margin-left: -18px;
            margin-right: 0;
          }
        }
        .@{timeline-item-prefix-cls}-content {
          right: 0;
          text-align: left;
          margin: 0 0 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap);
        }
      }
    }
    &.label {
      &.left {
        .@{timeline-item-prefix-cls} {
          &-tail,
          &-dot,
          &-dot.custom {
            right: calc((2 * @timeline-gap) + (@timeline-dot-size / 2));
            left: auto;
          }
          &-dot {
            margin-left: 0;
            margin-right: calc(-1 * (@timeline-dot-size - 1px) / 2);
            &.custom {
              margin-left: 0;
              margin-right: 1px;
            }
          }
          .@{timeline-item-prefix-cls}-label {
            text-align: left;
          }
          .@{timeline-item-prefix-cls}-content {
            right: calc(@timeline-dot-size + 35px);
            left: auto;
            text-align: right;
            margin-right: 0;
            margin-left: 16px;
          }
        }
      }
      &.right {
        .@{timeline-item-prefix-cls} {
          &-tail,
          &-dot,
          &-dot.custom {
            left: calc((2 * @timeline-gap) + (@timeline-dot-size / 2));
            right: auto;
          }

          &-dot {
            margin-right: 0;
            margin-left: calc(-1 * (@timeline-dot-size - 1px) / 2);
            &.custom {
              right: auto;
              left: calc(-1 * (@timeline-dot-size - 23px) / 2);
            }
          }
          .@{timeline-item-prefix-cls}-label {
            left: 0;
            right: auto;
            text-align: right;
          }
          .@{timeline-item-prefix-cls}-content {
            right: auto;
            left: calc(@timeline-dot-size + 35px);
            text-align: left;
            margin-right: 17px;
            margin-left: 0;
          }
        }
      }
      &.alternate {
        .@{timeline-item-prefix-cls} {
          &:nth-child(2n + 1) {
            .@{timeline-item-prefix-cls}-label {
              text-align: left;
            }
          }
          &:nth-child(2n) {
            .@{timeline-item-prefix-cls}-label {
              right: calc(50% + (2 * (@timeline-dot-size - @timeline-width) + @timeline-gap) - @timeline-dot-size / 2);
              left: auto;
              text-align: right;
            }
          }
        }
      }
    }
  }
}
/*! rtl:end:ignore */