.TimelineEvent {
  border-radius: var(--radius-4);
  background-color: var(--event-color-3);
  color: var(--event-color-12);
  padding: var(--space-1) var(--space-2);
  position: relative;

  width: var(--width);
  margin-left: var(--x-position);

  grid-row: var(--row-index, 1);
  grid-column: 1;

  &[data-dragging],
  &[data-resizing] {
    opacity: 0.5;
  }

  &:hover .TimelineEventResizeHandler {
    opacity: 1;
  }
}

.TimelineEvent::before {
  content: '';
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  left: 0;
  width: 3px;
  border-radius: var(--radius-1);
  background: var(--event-color-9);
  pointer-events: none;
}

.TimelineEventResizeHandler {
  position: absolute;
  width: 4px;
  top: 0;
  bottom: 0;
  z-index: 3;
  cursor: ew-resize;
  opacity: 0;

  &[data-start] {
    left: 0;
  }

  &[data-end] {
    right: 0;
  }
}