@use "sass:color";
@use "sass:math";
@use "../../style/var.scss" as var;

$timeline-dot-size: 8px;
$timeline-dot-color-past: var.$blue;
$timeline-dot-color-current: var.$green;
$timeline-dot-color-future: var.$gray-6;
$timeline-tail-color: #D8D8D8;

.bgo-timeline-item {
  position: relative;
  display: flow-root;
  padding-left: var.$padding-md;

  &__dot {
    position: absolute;
    top: 2px;
    left: - math.div($timeline-dot-size, 2);
    display: inline-block;
    width: $timeline-dot-size;
    height: $timeline-dot-size;
    background-color: $timeline-dot-color-current;
    box-shadow: 0 0 0 3px color.adjust($timeline-dot-color-current, $alpha: -0.8);
    border-radius: 50%;
  }

  &:last-child {
    .bgo-timeline-item__tail {
      display: none;
    }
  }
  
  &__tail {
    position: absolute;
    top: 10px;
    left: 0;
    bottom: 0px;
    width: 1px;
    background-color: $timeline-tail-color;
  }

  &__wrapper {
    overflow: hidden;
    margin-bottom: var.$padding-xl;
  }

  &__timestamp {
    color: var.$gray-6;
    font-size: var.$font-size-sm;
    margin-bottom: var.$padding-xs;
  }

  &__content {
    overflow: hidden;
    padding: 8px 10px;
    background-color: var.$white;
    border-radius: var.$border-radius-sm;
  }

  &--past {
    .bgo-timeline-item__dot {
      background-color: $timeline-dot-color-past;
      box-shadow: 0 0 0 3px color.adjust($timeline-dot-color-past, $alpha: -0.8);
    }
  }

  &--future {

    .bgo-timeline-item__dot {
      background-color: $timeline-dot-color-future;
      box-shadow: 0 0 0 3px color.adjust($timeline-dot-color-future, $alpha: -0.8);
    }
  }
}