tb-timeline {
  display: block;
  padding-top: 1em;
  padding-left: 5px;
}

.tb-timeline-item {
  display: block;
  position: relative;
  padding-left: 1.5em;
  padding-bottom: 0.5em;
  opacity: .76;
}

.tb-timeline-item:first-of-type > .tb-timeline-line {
  top: 1em;
}

.tb-timeline-item:last-of-type > .tb-timeline-line {
  bottom: calc(100% - 1em);
}

.tb-timeline-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid #dddee1;
}

.tb-timeline-icon {
  box-sizing: border-box;
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  left: -4px;
  top: .5em;
  background-color: #fff;
  border: 1px solid #bbbec4;
}

$colors: (key: primary, value: #1296db),
(key: info, value: #6ad1ec),
(key: success, value: #15bd9a),
(key: warning, value: #ff9900),
(key: danger, value:#E74F5E),
(key: dark, value:#495060),
(key: gray, value:#bbbec4);

@mixin timelineColor($key, $value) {
  .tb-timeline-item-#{$key} {
    opacity: 1;
  }
  .tb-timeline-item-#{$key} > .tb-timeline-icon {
    border-color: $value;
    background-color: $value;
  }
  .tb-timeline-item-#{$key} > .tb-timeline-line {
    border-color: $value;
  }
}

@each $item in $colors {
  @include timelineColor(map-get($item, key), map-get($item, value))
}