.#{$timeline-prefix-cls} {
  $root: #{&};
  padding: 0;
  margin: 0;
  font-size: $timeline-font-size;
  color: $timeline-color;
  list-style: none;

  &--horizontal {
    margin-left: $timeline-horizontal-space-left;
  }
  &--left {
    #{$root}__item-time{
      padding: 0px 0 5px;
      font-size: 14px;
      position: relative;
      top: -2px
    }
  }
  &--right {
    #{$root}__item-tail {
      position: absolute;
      top: 0;
      right: 4px;
      left: auto;
    }
    #{$root}__item-node{
      right: 0;
    }
    #{$root}__item-content{
      text-align: right;
      padding: 0 22px 0 0;
      #{$root}__item-time{
        padding: 0px 0 5px;
        font-size: 14px;
        position: relative;
        top: -2px
      }
    }
  }

  &-pending {
    .icon-gradient-success{
      color: $brand-success;
      margin-left: -4px
    }
  }

  &--cross {
    #{$root}__item:nth-child(odd) {
      #{$root}__item-tail {
        margin-left:-2px;
        top: 0;
        left: 50%;
      }
      #{$root}__item-node{
        left: 50%;
        margin-left:-6px
      }
      #{$root}__item-content{
        left: 50%;
        width: 50%;
        padding: 0 0 0 17px;
        #{$root}__item-time{
          padding: 0px 0 5px;
          font-size: 14px;
          position: relative;
          top: -2px
        }
      }
    }
    #{$root}__item:nth-child(even) {
      #{$root}__item-tail {
        margin-left:-2px;
        top: 0;
        left: 50%;
      }
      #{$root}__item-node{
        left: 50%;
        margin-left:-6px
      }
      #{$root}__item-content{
        width: 50%;
        text-align: right;
        padding: 0 17px 0 0;
        #{$root}__item-time{
          font-size: 14px;
          padding: 0px 0 5px;
        }
      }
    }
  }

  &__item {
    $item: #{&};
    position: relative;
    padding: 0 0 $timeline-item-space-left;
    margin: 0 !important;
    list-style: none;

    &-tail {
      position: absolute;
      top: 0;
      left: 4px;
      height: 100%;
      border-left: 2px solid $timeline-item-tail-color;

      #{$item}:last-child & {
        border-color: transparent;
      }
    }

    &-time {
      font-size: 12px;
      color: $gray-light-45;
      padding: 0 0 2px;
      #{$root}--horizontal & {
        position: absolute;
        top: 2px;
        left: -($timeline-horizontal-space-left);
        width: $timeline-item-time-width;
        text-align: $timeline-horizontal-time-align;
      }
    }

    i#{&}-icon {
      display: inline-block;
      width: 100%;
      width: $timeline-item-icon-width;
      height: $timeline-item-icon-width;
      background-color: $white;
      border: $timeline-item-icon-border;
      border-radius: $timeline-item-icon-border-radius;
      // box-shadow: 0 1px 4px rgba($brand-primary, .75);
    }

    &-node {

      @each $color, $value in $color-status {
        &--#{$color} {
          i {
            color: nth($value, 1);
            //text-shadow: 0 0 10px rgba(nth($value, 1), .75);
          }

          i#{$item}-icon {
            border: 2px solid nth($value, 1);
            //box-shadow: 0 1px 4px rgba(nth($value, 1), .75);
          }
        }
      }
      position: absolute;
      top: -3px;
      .#{$icon-prefix}-star{
        left: -2px;
        font-size: 14px;
      }
      i {
        position: relative;
        top: -8px;
      }
    }

    &-content {
      position: relative;
      top: -8px;
      padding: $timeline-item-content-padding-top $timeline-item-content-padding-right $timeline-item-content-padding-bottom $timeline-item-content-padding-left;

      &-title {
        font-family: $headings-font-family;
        color: $gray-light-85;
        font-size: 14px;
        line-height: 22px;
        font-weight: 600;
        // margin-top:-6px;
      }

      &-detail {
        color: $gray-light-65;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }
}