$offset: 10px;
$line-top-offset: 3px;
$dot-size: 16px;
$dot-size-lg: 20px;
$border-size: 1px;
$border-size-cover: 2px;

:host {
  @apply bg-white;
  min-height: 500px;
}

.row {
  @apply w-full flex flex-row flex-grow items-center px-2 my-2;

  .label {
    width: 150px;
  }
}

hr {
  height: 2px;
  @apply bg-disabled-customer my-6;
  margin-left: -1rem;
  width: calc(100% + 2rem);
}

.error {
  @apply text-warning text-center;
}

.loading-spinner {
  @apply p-8;
}

.scroll-container {
  @apply overflow-y-scroll overflow-x-hidden mr-10 mb-8;
  max-height: 800px;
}

.scroll-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #e1ebf5;
}

.scroll-container::-webkit-scrollbar {
  width: 12px;
  background-color: white;
}

.scroll-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #0f2942;
}

.content-wrapper {
  @apply flex flex-col pl-2 pr-9 mb-10;
}

.details {
  @apply my-0;
}

.title {
  @apply font-bold text-lg;
}

.changes {
  @apply flex flex-row my-0;

  p {
    @apply m-0;
  }

  .changes-gap {
    @apply mx-1;
  }
}

.log-entry {
  position: relative;
  // calculate offset relative to container offset (22px)
  padding-left: calc(70px - 22px);

  &:before {
    content: '';
    position: absolute;
    height: calc(100% + 40px);
    width: 1px;
    top: $line-top-offset;
    left: $offset;
    border: $border-size solid #e1ebf5;
    background: #e1ebf5;
  }

  &.last:before {
    height: 30%;
    border: $border-size-cover solid #fff;
    background: #fff;
    left: calc(#{$offset} - #{$border-size-cover});
  }

  .timeline-dot {
    position: absolute;
    top: 0;
    left: $offset;
    background: #fff;
    width: 2px;

    &:before {
      content: '';
      position: absolute;
      background: #e1ebf5;

      top: $line-top-offset;
      left: calc((#{$dot-size} - #{$line-top-offset}) / -2);
      border-radius: 50%;
      width: $dot-size;
      height: $dot-size;
    }
  }

  &.first {
    .timeline-dot:before {
      width: $dot-size-lg;
      height: $dot-size-lg;
      background: #be8100;
      left: calc(#{$dot-size} / -2);
    }
  }
}
