@import '../../configs/color';

.c-TimelineItem {
  @import '../../resets/base';
  // Variables
  $item-padding: 6px;
  $border-offset: 4px;
  $border-width: 2px;
  $dot-total-size: 10px;
  $dot-border-width: $border-width;
  $dot-size: $dot-total-size - ceil($dot-border-width * 2);
  $dot-offset: $item-padding + ceil($dot-total-size / 2);
  $timestamp-size: 60px;

  display: block;
  line-height: 1.5;
  margin-left: $border-offset;
  padding: $item-padding 0 $item-padding 20px;
  position: relative;

  &__block {
    max-width: calc(100% - #{$timestamp-size});
  }

  &__timestamp {
    min-width: $timestamp-size;
    opacity: 0;
    transition: opacity 200ms linear;
    will-change: opacity;
  }
  &:hover {
    .c-TimelineItem__timestamp {
      opacity: 1;
    }
  }

  // Border
  &::before {
    background-color: _color(grey, 400);
    bottom: 0;
    content: '';
    left: $border-offset;
    position: absolute;
    top: 0;
    width: $border-width;
    z-index: 0;
  }

  // Dot
  &::after {
    background-color: white;
    border-radius: 50%;
    border: $dot-border-width solid _color(grey, 800);
    content: '';
    display: block;
    height: $dot-size;
    left: 0;
    position: absolute;
    top: $dot-offset;
    width: $dot-size;
    z-index: 1;
  }

  &:first-child {
    // Border
    &::before {
      bottom: 0;
      top: $dot-offset;
    }
  }

  &:last-child {
    // Border
    &::before {
      bottom: calc(100% - (#{$dot-offset} + (#{$dot-size}/ 2)));
      top: 0;
    }
  }

  &:only-child {
    // Border
    &::before {
      display: none;
    }
  }
}