/* graph view */

body.data.graph-explore
{
	overflow:hidden;
	height:0;
}

.graph-controls
{
	z-index:1000;

  position: fixed;
  right: 8px;
  bottom: 12px;
  display: flex;
  transition: transform var(--slide-in-fast);
  transition-delay:.3s;
}

.graph-controls .control
{
  margin: 0 4px;
}

body:not(.graph-explore) .graph-controls
{
  transform: translateX(calc(100% + 4px));
}

.fill.action
{
	background-color:var(--data-light);
}

#explore-view
{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;

	padding:0 !important;
	
	
	visibility:hidden;
	pointer-events:none;

/* 
	background-color:rgba(29,29,29,.3);
	
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
 */
	
	transition:opacity .6s var(--curve) 0s;
	
	z-index:200;
}
#explore-view > svg
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#explore-view.active
{
	visibility:visible;
	pointer-events:all;
}


#explore-view .label.blur-bg:hover
{
	background-color:var(--button-hover);
}



.graph-ui
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 50% 50%;
	z-index: 1;
}
.graph-ui > *
{
	z-index:1;
	position:absolute;
	left:0;
	top:0;
	/* transform-origin:50% 50%; */
	pointer-events:none;
	background-size:contain;
	
	/* transition:opacity 1s ease 0s; */
	transition:
		filter 1s ease 0s,
		opacity .3s ease .1s;
}
.graph-ui > div > *
{
	transition:opacity 1s ease 0s;
}
.graph-ui .label
{
	will-change: transform;
	pointer-events: none;
}

.graph-ui.simplify label
{
	visibility: hidden;
}
.label svg.expand
{
	flex-shrink:0;
	margin-right:-12px;
	/* background:rgba(0,0,0,.1); */
	margin-top:4px;
	
	transition:
		transform .4s ease .3s,
		opacity 1s ease 0s,
		color .4s ease 0s;

	align-self: flex-start;	
}
.label.content svg.expand
{
	transform:rotate(-45deg);
	/* transition-delay:.5s; */
}


.label.expanded svg.expand
{
	transform:rotate(180deg);
}



.graph-ui .collapse
{
	position:absolute;
	top:0;
	right:-30px;
	/* pointer-events:all; */
}
.graph-ui .active
{
	transition:none;
	/* background-color:rgba(250,0,0,.2); */
}

.graph-ui .label.active,
.graph-ui .graph-scan.active,
.graph-ui .graph-scan.keep-active
{
	z-index:200 !important;
}
.graph-ui .label.active.hover,
.graph-ui .label.keep-active
{
	z-index:300 !important;
	min-height:30px;
}

.graph-ui .label.object
{
	z-index:100;
}
.graph-ui .label.content
{
	z-index:101;
}

.graph-ui .label label
{
	word-wrap:break-word;
}

/* 
#page-graph canvas
{
	position
}
 */
#explore-view > svg,
#page-graph > svg
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#explore-view svg rect.clickable,
#page-graph svg rect
{
	cursor: pointer;
}
/* .graph-ui.hover > *:not(.active) */
.graph-ui.hover > div:not(.active) > *
{
	opacity:.5;
	/* filter:brightness(60%); */
}

#scan-zoom
{	
	z-index:1000;
}

.graph-scan
{
	/* background-color:rgba(250,0,0,.2) */
	border-radius:6px;
}

#legend,
/* #explore-exit, */
#grid-paging
{
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 1000;
  transform: translateX(-50%);
  transition: transform var(--slide-in-fast);
  border:none;
}
#explore-exit .icon {
  margin-top: 3px;
}

#explore-exit
{
	position: absolute;
	top:30px;
	left:12px;
	border:none;
	z-index:1000;
	
	/* color:var(--light); */
}
#explore-exit:hover
{
	/* background-color:var(--light); */
}