:host {
  // Dot Timeline
  --timeline-bar-left-offset: 6px;
  --timeline-bar-dots-top-offset: 5px;
  --timeline-bar-dot-size: 14px;
  --timeline-bar-line-width: 1px;

  min-height: 500px;
}

.wrapper {
  background-color: #f5f7fa;
}

.scroll-container {
  max-height: calc(100vh - 250px);
}

.log-entry {
  &:before {
    content: "";
    position: absolute;
    height: calc(100% + 40px);
    width: 1px;
    top: var(--timeline-bar-dots-top-offset);
    left: var(--timeline-bar-left-offset);
    border: var(--timeline-bar-line-width) solid #aeb7c1;
    background: #aeb7c1;
  }

  &.last:before {
    @apply bg-white;
    height: 100%;
    border: var(--timeline-bar-line-width) solid #aeb7c1;
    left: var(--timeline-bar-left-offset);
    top: unset;
  }

  &.last.first:before {
    top: var(--timeline-bar-dots-top-offset);
    height: 97%;
  }

  .timeline-dot {
    @apply absolute top-0 bg-white;
    left: var(--timeline-bar-left-offset);
    width: 2px;

    &:before {
      @apply absolute;
      content: "";
      background: #aeb7c1;
      top: var(--timeline-bar-dots-top-offset);
      left: calc((-1 * var(--timeline-bar-dots-top-offset)) - 1px);
      border-radius: 50%;
      width: var(--timeline-bar-dot-size);
      height: var(--timeline-bar-dot-size);
    }

    &.last:before,
    &.bottom-square:before {
      @apply rounded-none;
    }

    &.last,
    &.bottom-square {
      top: unset;
      bottom: 18px;
    }
  }

  &.first {
    .timeline-dot:before {
      @apply bg-black;
      width: var(--timeline-bar-dot-size);
      height: var(--timeline-bar-dot-size);
      left: calc((var(--timeline-bar-dot-size) / -2) + 1px);
    }

    .timeline-dot.bottom-square:before {
      background: #aeb7c1;
    }
  }
}
