.event-thread {
  &__border {
    display: flex;
    @include full-circle(8px);
    margin-right: 16px;
    background: $dark-blue-1;
    margin-top: 5px;

    &::after {
      position: absolute;
      content: "";
      width: 1px;
      background: $grey-1;
      height: calc(100% - 17px);
      top: 17px;
      left: 3.5px;
      z-index: -1;
    }
  }

  &__content {
    width: 100%;
  }

  &__date {
    color: $dark-blue-6;
  }

  &__event {
    border: 1px solid $grey-1;
    border-radius: 8px;
    padding: 16px;
    color: $dark-blue;
    margin: 8px 0 16px;
    transition: all ease-in-out 0.3s;
    cursor: pointer;
    word-break: break-word;
  }

  &__item {
    @include display-flex(flex-start, stretch);
    position: relative;

    &--active {
      .event-thread__event {
        border-color: $primary;
        box-shadow: $input-shadow;
      }
    }

    &:last-child {
      .event-thread__border {
        &::after {
          height: calc(100% - 33px);
        }
      }
    }
    &.plain {
      .event-thread__content {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 24px;
      }
      .event-thread__event{
        border: none;
        padding: 0;
        box-shadow: none;
        margin-top: -5px;
        margin-bottom: 8px;
      }
      .event-thread__border{
        &::after {
          height: calc(100% - 17px);
        }
      }
    }
  }
}