@import 'variables';

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

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

  &:before {
    content: '';
    position: absolute;
    height: 130%;
    width: 1px;
    top: $line-top-offset;
    left: $offset;
    border: $border-size solid $isa-light-blue-platinum;
    background: $isa-light-blue-platinum;
  }

  &.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: $isa-light-blue-platinum;

      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: $isa-neutral-info;
      left: calc(#{$dot-size} / -2);
    }
  }
}
