#timeline {
  > ul {
    padding-left: 1em;
    list-style: none;
    position: relative;

    // Vertical line
    &::before {
      content: " ";
      height: 100%;
      width: 1px;
      // Fade the line out at the bottom.
      // The ~"calc(…  syntax is necessary because we are using different units. See https://github.com/less/less.js/issues/3047
      background: linear-gradient(
        180deg,
        @gray-light ~"calc(100% - 65px)",
        fadeout(@gray-light, 100%) 100%
      );
      background-color: @gray-light;
      position: absolute;
      top: 10px;
      left: 1.5em;
      z-index: -1;
    }

    li.timeline-event {
      margin-bottom: 2em;
      position: relative;
      .event-description {
        display: flex;
        flex-wrap: wrap;
        .event-time {
          &:extend(.text-muted);
          // position: absolute;
          // right:0;
          font-size: 0.8em;
          font-style: italic;
          text-align: right;
          align-self: flex-end;
          flex: 1;
          flex-basis: 7em;
        }

        .event-icon {
          position: absolute;
          border-radius: 50%;
          background: white;
          z-index: 1;
          border: 7px solid white;
          left: -6px;
          top: -6px;
          &.recording_recommendation {
            color: @orange;
          }
          &.listen {
            color: @blue;
          }
          &.like {
            color: @red;
          }
          &.follow {
            color: @green;
          }
          &.notification {
            color: @turquoise;
          }
          &.recording_pin {
            color: @yellow;
          }
        }

        .event-description-text {
          flex: 1;
          flex-basis: 25em;
          margin-left: 2.5em;
        }
      }
      .event-content {
        padding-top: 1em;
        padding-left: 2.5em;
      }
    }
  }
}
