/*-- Layout Variables --*/
vcb layout {
	--layout-color: var(--vcb-main-color);
	--seg-resizer-color: #aaa;
}


/*-- Layout Structure --*/
vcb layout {
	width:100%; height:100%;

	display: flex;
	flex-flow: column;
	place-content: stretch;
	align-items: stretch;
}
vcb layout row {
	flex: 1;
	display: flex;
}


/*-- Segment Resize Structure --*/
row seg { 
    overflow: hidden; 
    /*flex: 1; **must place in html, won't work here*/

    display: flex;
    flex-direction: row;
}
row > flex-resizer {
    overflow: auto;
    flex: 0 0 10px;
    
    background-color: var(--seg-resizer-color);
    background-repeat: no-repeat;
    background-position: center;
}
row.h { flex-direction: row; }
row.v { flex-direction: column; }
row.h > flex-resizer {
    cursor: ew-resize;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
}
row.v > flex-resizer {
    cursor: ns-resize;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>");
}


/*-- Layout Style --*/
vcb layout { background: var(--layout-color); }

vcb layout.loading { filter: brightness(.5); }

vcb layout.notouch vcbcard con {
	pointer-events: none;
}