a-scene.debug a-entity
{
	position: absolute;
	overflow: visible;
	border: 1px solid black;
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background-color: orange;
	box-sizing: border-box;
}

a-scene.debug a-entity.debug-hidden,
a-scene.debug a-entity.debug-hidden-parent
{
	border-color: rgba(0,0,0,0.4);
	background-color: transparent;
}

a-scene.debug a-entity:hover
{
	border-color: white;
}

a-scene.debug a-entity.debug-pivot-offscreen
{
	width: 0px;
	height: 0px;
	border-width: 0px;
	background-color: transparent;
}

a-scene.debug a-entity:hover::after
{
	content: attr(data-debug-components);
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	position: absolute;
	left: 0px;
	bottom: 0px;
	white-space: pre;
}

a-scene.debug a-entity.debug-box::before
{
	content: "";
	position: absolute;
	border: 1px dotted blue;
	overflow: visible;
	left: var(--box-left);
	width: var(--box-width);
	top: var(--box-top);
	height: var(--box-height);
	z-index: var(--box-depth);
}

a-scene.debug a-entity.debug-box.debug-box-offscreen::before,
a-scene.debug a-entity.debug-box.debug-hidden::before,
a-scene.debug a-entity.debug-box.debug-hidden-parent::before
{
	display: none;
}

a-scene.debug a-entity.debug-box:hover:after
{
	border-color: aquamarine;

}