.at-timeline {
  /* element */
  &__item {
    position: relative;
    padding: 0 0 12px;

    &--default {
      .at-timeline__dot {
        color: $timeline-dot-color;
        border-color: $timeline-dot-color;
      }
    }
    &--success {
      .at-timeline__dot {
        color: $timeline-dot-color-success;
        border-color: $timeline-dot-color-success;
      }
    }
    &--error {
      .at-timeline__dot {
        color: $timeline-dot-color-error;
        border-color: $timeline-dot-color-error;
      }
    }
    &--warning {
      .at-timeline__dot {
        color: $timeline-dot-color-warning;
        border-color: $timeline-dot-color-warning;
      }
    }
    &--custom {
      .at-timeline__dot {
        top: -2px;
        left: -4px;
        width: $timeline-custom-dot-size;
        height: $timeline-custom-dot-size;
        font-size: $timeline-custom-dot-font-size;
        text-align: center;
        border: 0;

        .icon {
          display: block;
          margin-top: 2px;
        }
      }
    }
    &--last {
      .at-timeline__tail {
        display: none
      }
      .at-timeline__content {
        min-height: $timeline-item-last-min-height;
      }
    }
  }
  &__tail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: ($timeline-dot-size - 2) / 2;
    border-left: 2px solid $timeline-line-color;
  }
  &__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: $timeline-dot-size;
    height: $timeline-dot-size;
    border: 2px solid transparent;
    border-radius: 50%;
    background-color: $timeline-dot-bg-color;
  }
  &__content {
    position: relative;
    top: -($timeline-text-font-size - 2) / 2;
    padding: 0 0 8px 24px;
    font-size: $timeline-text-font-size;
  }

  /* modifier */
  &--pending {
    .at-timeline__item--pending {
      .at-timeline__tail {
        display: none
      }
    }
    .at-timeline__item--last {
      .at-timeline__tail {
        display: inline-block;
        border-left-style: dotted;
      }
    }
  }
}