.timeline {
  width: 40px;

  .caret {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    color: var(--color-text-3);
    &.up {
      top: 0;
    }
    &.down {
      bottom: 0;
    }
  }
  .orbit {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 24px;
    bottom: 24px;
    width: 5px;
    background: var(--color-fill-2);
    &:hover {
      .cursor.active {
        opacity: 1;
      }
    }
    .cursor {
      transition: opacity 0.25s ease;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 12px;
      border: 2px solid;
      border-radius: 50%;
      &.active {
        opacity: 0;
      }
    }
    .node {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      &.bingo {
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-text-3);
        &::before {
          position: absolute;
          content: attr(data-year);
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          font-size: 12px;
          color: var(--color-text-3);
          line-height: 1;
        }
      }
      &.empty {
        right: 10px;
        background: var(--color-fill-3);
      }
    }
  }

  &:hover {
    .caret {
      display: block;
    }
  }
}