birds.css

/* birds.css - styles for combinator birds */

html, body, div, span, svg {
	margin: 0;
	border: 0;
	padding:0;
	box-sizing:border-box;
}
html, body, div {
	line-height:0;
}
.text { line-height:initial; }

/* combinator body */
.combinator {
	border-color:black;
	border-width:1px;
	border-style:dotted;
	
	margin-left: 4px;
	margin-right:4px; /* border adds an extra 1px */
	
	background-color:white;
	
	min-width:40px;
	min-height:20px;
	max-width: 400px;
	
	position:relative;
	display:inline-block;
	vertical-align: bottom;
	
}

.combinator .betareduced { /* untested */
	border-color: transparent; /* still take up space in box model and not mess up positioning */
	margin-left:0px;
	margin-right:0px;
}
.betareduced > .leftcircle, .betareduced > .rightcircle {
	display:none;
}


.top > .combinator {
	margin-top: 5px;
}
.bottom > .combinator {
	margin-top:5px;
	margin-bottom:5px;
	bottom: auto;
}

.simple-combinator {
	bottom:5px;  /* equalize applycircle height with other combinators */
}
.top > .simple-combinator {
	bottom:0px;
}
/* use margin-bottom? */

.rhyme {
	min-width:10px;
	/* width:15px; */
	height:100%;
	/* margin-right:10px;  removed:use  */
	display:inline-block;
	position:relative;
	left:0px;
	vertical-align:top;
}
.norhyme-container {
	display:inline-block;
	/*margin-top: 4px;*/
}

/* leftcircle and rightcircle -- use :before/:after instead? */
.leftcircle {
	background-color:black;
	border-bottom-left-radius:5px;
	border-top-left-radius:5px;
	width: 5px;
	height: 10px;
	position:absolute;
}
	
.rightcircle {
	background-color:black;
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	width:5px;
	height:10px;
	position:absolute;
}

.combinator > .leftcircle{
	right:100%;
	bottom:10px;
}
.combinator > .rightcircle{
	left:100%;
	bottom:10px;
}
.apply > .leftcircle{
	right:0%;
	bottom:-5px;
}
.apply > .rightcircle{
	left:100%;
	bottom:-5px;
}

/* more special things for I etc */
.simple-combinator > .leftcircle , .simple-combinator > .rightcircle {
	bottom:4px;
	/* a combinator that does not contain any sub-combinator on the bottom */
}




/* turndown from top half to bottom half */
.turndown {
	border-top: 1px;
	border-left: 0px;
	border-right: 1px;
	border-bottom: 0px;
	border-style: solid;
	
	position:relative;
	height:10px; /* up to combinator's rightcircle. */
	min-width:20px;
	
	/* width always the same as apply, eg
	* .-----------.
	* |___________| ---.
	* ------------- ---O---   (no combinator on the bottom is a <continue>)
	* OR
	* 
	* -(-------)---.   <-- turndown is same length, but apply is taller     abc > `a`bc
	*              |
	* -(------.)   |
	* -(------O)---O---
	* (apply has min-width that matches with turndown minwidth)
	* .apply must have 100% height of div.bottom
	*/
}
/*.top > .turndown,*/
.combinator + .turndown, .continue + .turndown {
	display:inline-block;
}


/* apply in bottom half */
.apply { /* may overlap with turndown ?? */
	border-right: 1px;
	border-bottom:1px;
	border-left:0px;
	border-top:0px;
	border-style: solid;
	
	min-width:20px;
	min-height:20px;
	height: 100% ;
	
	position:relative;
	margin-bottom:9px; /* match up with combinator rightcircle */
	display:inline-block;
}
/* .bottom > .apply {}  */
.combinator + .apply {
	display:inline-block; /* the combinator too */
	bottom:5px;
}
.simple-combinator > .norhyme-container > .bottom > .apply {
	min-height:15px;
}

.continue {
	border-top:1px solid;
	position:relative;
	min-width:20px;
	margin-bottom:9px; /* up to apply's rightcircle = combinator's rightcircle. */
	bottom:5px;
}
.norhyme-container + .continue {
	display:inline-block;
	top:auto;
}
.combinator > .continue:first-child { /* for I only (inconsistent, change?)*/
	height:0px;
	margin-top:9px; 
}
.top > .continue, .bottom > .continue {  /* most important, esp in basic combinators */
	display:inline-block;
	vertical-align:bottom;
	margin-top:10px;
}
.simple-combinator > .continue , .simple-combinator > .norhyme-container > div > .continue {
	bottom:auto;
}


/* rhyme */
line {
	stroke:black;
	stroke-width:1px;  /* or .7px and no crispEdges (scales better) */
	shape-rendering:crispEdges;
}
.rhyme > svg {
	min-width:10px;
	min-height:10px;
	height: inherit;
	max-width:30px;
}

div.combinator :focus :before {
	/* on hover, show options/code/etc */
}
div.combinator :hover {
	/* show which is selected (make sure only one, not parents/children?) */
}