.timeline {
  $root: #{&};
  font-size: $timeline-font-size;
  list-style: none;
  margin: 0;
  padding: 0;
  color: $timeline-color;
  &--horizontal {
    margin-left: $timeline-horizontal-space-left;
  }
  &__item {
    $item: #{&};
    margin: 0 !important;
    padding: 0 0 $timeline-item-space-left;
    list-style: none;
    position: relative;

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

      #{$item}:last-child &{
        border-color: transparent;
      }
    }
    &-time {
      color: $gray;
      font-size: $font-size-sm;

      #{$root}--horizontal & {
        position: absolute;
        top: 3px;
        left: -($timeline-horizontal-space-left);
        width: $timeline-item-time-width;
        text-align: $timeline-horizontal-time-align;
      }
    }
    i#{&}-icon {
      background-color: $white;
      width: 100%;
      display: inline-block;
      border: $timeline-item-icon-border;
      border-radius: $timeline-item-icon-border-radius;
      width: $timeline-item-icon-width;
      height: $timeline-item-icon-width;
      box-shadow: 0 1px 4px rgba($brand-primary, 0.75);
    }
    &-node {
      position: absolute;
      i {
        position: relative;
        top: -4px;
      }
      @each $color,$value in $color-status {
        &--#{$color}{
          i{
            color: nth($value,2);
            text-shadow: 0 0 10px rgba(nth($value,2), 0.75);
          }
          i#{$item}-icon{
            border: 3px solid nth($value,2);
            box-shadow: 0 1px 4px rgba(nth($value,2), 0.75);
          }
        }
      }

    }

    &-content {
      padding: $timeline-item-content-padding-top $timeline-item-content-padding-right $timeline-item-content-padding-bottom $timeline-item-content-padding-left;
      position: relative;
      top: -6px;
      &-title {
        font-family: $headings-font-family;
        margin-bottom:$headings-margin-bottom;
      }

      &-detail {
        font-size: $font-size-sm;
      }
    }
  }
}