/*
This file is part of Vodka.

Vodka is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Vodka is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Vodka.  If not, see <https://www.gnu.org/licenses/>.
*/



.org {
	height:auto;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 0px;
}

.org.vdir {
	flex-direction: column;
}

.org.exploded {
	padding: 5px;
	border: 1px solid var(--org-border);
	border-radius: 6px;	
}

.org.exploded > .nex.exploded {
	margin: 2px 2px 2px 2px;
}

.org.mutable {
	border-width: 3px;
	padding: 3px;
}

.org.exploded.selected {
	padding: 3px;
	border: 3px solid var(--org-border-strong);
}

.org.exploded.newselected {
	border-color: var(--selected-border);
}

.org.exploded.selected.redorgs {
	border: 3px solid var(--selected-border);	
}


.zdir {
	align-self:flex-start;
	display: grid;
	padding: 0px;
}



.zdir.exploded {
	padding-left: 5px;
	padding-top: 5px;
/*	border-left: 5px dotted var(--org-border);
	border-top: 5px dotted var(--org-border);
	border-right: 0px;

	border-bottom: 0px;

*/
	border-bottom: 0px;


/*	border-radius: 6px;
*/
}

.zdir.exploded.mutable {
	border-bottom-style: dotted;
	border-bottom-width: 3px;
	border-bottom-color: var(--org-border);
}

.zdir.exploded.mutable.newselected {
	border-bottom-color: var(--selected-border);
}


.zdir.exploded.selected {
	border-top: 5px solid var(--org-border-strong);
	border-left: 5px solid var(--org-border-strong);
	border-right: 0px;
	border-bottom: 0px;
}

.zdir.exploded:empty {
	width:0px;
	height:0px;
	border: 1px solid var(--org-border);
	padding:5px;
}

.zdir.exploded.selected:empty {
	width:0px;
	height:0px;
	padding: 3px;
	border: 3px solid var(--org-border-strong);
}


.zdir > .nex {
	grid-column: 1;
	grid-row: 1;
}
.zdir > .nex:nth-child(1) { z-index:0; }
.zdir > .nex:nth-child(2) { z-index:1; }
.zdir > .nex:nth-child(3) { z-index:2; }
.zdir > .nex:nth-child(4) { z-index:3; }
.zdir > .nex:nth-child(5) { z-index:4; }
.zdir > .nex:nth-child(6) { z-index:5; }
.zdir > .nex:nth-child(7) { z-index:6; }
.zdir > .nex:nth-child(8) { z-index:7; }
.zdir > .nex:nth-child(9) { z-index:8; }
.zdir > .nex:nth-child(10) { z-index:9; }
.zdir > .nex:nth-child(11) { z-index:10; }
.zdir > .nex:nth-child(12) { z-index:11; }
.zdir > .nex:nth-child(13) { z-index:12; }
.zdir > .nex:nth-child(14) { z-index:13; }
.zdir > .nex:nth-child(15) { z-index:14; }
.zdir > .nex:nth-child(16) { z-index:15; }
.zdir > .nex:nth-child(17) { z-index:16; }

.zdir.exploded > .nex:nth-child(1) { margin-top:0px; }
.zdir.exploded > .nex:nth-child(2) { margin-top:10px; }
.zdir.exploded > .nex:nth-child(3) { margin-top:20px; }
.zdir.exploded > .nex:nth-child(4) { margin-top:30px; }
.zdir.exploded > .nex:nth-child(5) { margin-top:40px; }
.zdir.exploded > .nex:nth-child(6) { margin-top:50px; }
.zdir.exploded > .nex:nth-child(7) { margin-top:60px; }
.zdir.exploded > .nex:nth-child(8) { margin-top:70px; }
.zdir.exploded > .nex:nth-child(9) { margin-top:80px; }
.zdir.exploded > .nex:nth-child(10) { margin-top:90px; }
.zdir.exploded > .nex:nth-child(11) { margin-top:100px; }
.zdir.exploded > .nex:nth-child(12) { margin-top:110px; }
.zdir.exploded > .nex:nth-child(13) { margin-top:120px; }
.zdir.exploded > .nex:nth-child(14) { margin-top:130px; }
.zdir.exploded > .nex:nth-child(15) { margin-top:140px; }
.zdir.exploded > .nex:nth-child(16) { margin-top:150px; }
.zdir.exploded > .nex:nth-child(17) { margin-top:160px; }

/*
An org drawn as its `:rendered` child: no box, no colour of its own. What you
see is the drawing, so the org around it should not be visible at all.

(comment by Claude)
*/
.drawnorg {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: transparent;
	border: none;
	padding: 0;
}