.appGrid .timeline .keyframes .frame .keyframeWrapper {
	--keyframe-color: var(--gruble);
	color: var(--keyframe-color);
	line-height: 0;
	width: 24px;
	height: 24px;

	background-color: rgba(255, 0, 255, var(--debug-hitbox-opacity));
	pointer-events: initial;
}

.appGrid .timeline .keyframes .frame.current .keyframeWrapper { color: var(--piss); }
.appGrid .timeline .keyframes .frame.current .keyframeWrapper .loop .connector { background-color: var(--piss); }

.appGrid .timeline .keyframes .frame .keyframeWrapper,
.appGrid .timeline .keyframes .frame .keyframeWrapper .loop .connector {
	transition-property: color, background-color;
	transition-duration: .2s;
}

.timeline .keyframes .frame .keyframeWrapper { cursor: grab; }
.timeline .keyframes .frame .keyframeWrapper:active { cursor: grabbing; }

.loop .connector {
	height: 16px;
	background-color: var(--keyframe-color);
	opacity: .25;
	inset: 4px 13px;
	position: absolute;
}

.loop {
	position: absolute;
	width: calc((var(--frame) - var(--begin)) * var(--zoom) * 1px + 24px);
	height: 24px;
	right: 0;
}

.loop .start,
.loop .end {
	z-index: 1;
}

.keyframe {
	line-height: 0;
	fill: currentColor;
}

.keyframe .background,
.keyframe .outline {
	opacity: 1;
	transition-property: opacity;
	transition-duration: 200ms;
}

.keyframe.ghost .background { opacity: .2; }
.keyframe.ghost .outline { opacity: .7; }

#ghost { transform: translate(-16px, -16px); }