/*
 * Base stylesheet for SVGTree.
 * (c) 2015, Alex Ostrovski
 */

/** Styles for SVG elements. */

.svgtree {
	box-sizing: border-box;
}

/* Node markers. */
.svgtree .marker {
	stroke: gray;
	fill: gray;
}
.svgtree .collapsed  .marker {
	fill: white;
	stroke-width: 4;
}

/* .hover class is used to emulate hover when the marker 
   is obscured by a target for drag'n'drop. */
.svgtree *:hover>.marker,
.svgtree *.hover>.marker, 
.svgtree .selected .marker {
	stroke: orange;
	fill: orange;
}

.svgtree .collapsed:hover .marker,
.svgtree .collapsed.hover .marker,
.svgtree .collapsed.selected .marker {
	fill: white;
	stroke: orange;
}

.svgtree .label {
	text-anchor: start;
	fill: black;
	font-size: 12px;
	line-height: 1;
	font-family: Cambria,"Droid Serif",serif;
}

.svgtree .label .c {
	text-anchor: middle;
}

.svgtree-editable .selected .label {
	visibility: hidden;
}

/* Dragged node. */
.svgtree .drag .marker,
.svgtree .collapsed.drag .marker {
	fill: white;
	stroke: gray;
}
.svgtree .drag .label {
	fill: gray;
}

.svgtree .edges .drag {
	stroke-dasharray: 1 2;
}

/* Drop target. */
.svgtree .drop-move .marker {
	fill: #f44;
	stroke: #f44;
}
.svgtree .collapsed.drop-move .marker {
	fill: white;
	stroke: #f44;
}
.svgtree .drop-move .label {
	fill: #f44;
}

.svgtree .drop-copy .marker {
	fill: #4f4;
	stroke: #4f4;
}
.svgtree .collapsed.drop-copy .marker {
	fill: white;
	stroke: #4f4;
}
.svgtree .drop-copy .label {
	fill: #4f4;
}

/* Summary for collapsed nodes. */
.svgtree .summary {
	fill: gray;
}

.svgtree .edges {
	stroke: gray;
	fill: none;
}

/* Insertion point marker. */
.svgtree .insert {
	stroke: #f44;
	stroke-width: 2;
	fill: #faa;
	opacity: 0.5;
}
.svgtree .insert.drop-copy {
	stroke: #4f4;
	fill: #afa;
}

.svgtree-wrap {
	display: inline-block;
	line-height: 0;
	position: relative;
	overflow: hidden;
}

/* HTML element serving a target for drag operations. */
.svgtree-target {
	width: 25px;
	height: 25px;
	margin-left: -12.5px;
	margin-top: -12.5px;
	position: absolute;
	box-sizing: border-box;
	z-index: 1000;
	border: 1px dotted transparent;
}
.svgtree-target.selected {
	border-color: orange;
}
.svgtree-target.drag {
	background: rgba(96,96,96,0.5);
	border: 1px solid gray;
}

/* Input for editing node labels. */
.svgtree-input {
	display: none;
	font-size: 11px;
	position: absolute;
	width: 50px;
	height: 18px;
	box-sizing: border-box;
	z-index: 999;
	border: 1px solid orange;
	background: rgba(255,255,240,0.75);
	margin: 0;
	padding: 0;
	text-align: center;
}

.svgtree-h .svgtree-input {
	margin-left: 10px;
	margin-top: -9px;
}
.svgtree-v .svgtree-input {
	margin-left: -25px;
	margin-top: 9px;
}