/*\

grid-widget

\*/

main > div {
	margin:calc(1em + 1rem + 1rem) auto;
}
.grid-widget {
	position:relative;
	/*
	top:calc(-1em - 1rem);
	left:calc(-0.5em - 0.5rem);
	display:grid;
	grid-gap:1rem;
	width:calc(100% + 1em + 1rem);
	height:calc(100% + 1em + 1rem);
	box-sizing:border-box;
	padding:1rem;
	*/
	background-color:rgb(225,225,225);
}
.grid-widget .page {
	grid-column-start:1;
	grid-column-end:-1;
	grid-row-start:1;
	grid-row-end:-1;
}
.grid-resize-layer,
.grid-panel-layer,
.grid-join-layer {
	display:grid;
	grid-template:inherit;
	grid-gap:1rem;
	box-sizing:border-box;
	padding:1rem;
	grid-column-start:1;
	grid-column-end:-1;
	grid-row-start:1;
	grid-row-end:-1;
}

/*\

resize

\*/

.grid-widget-column {
	position:relative;
	top:calc(-1em - 1rem - 1rem);
	height:1em;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:rgb(140,140,140);
}
.grid-widget-column input {
	width:4em;
	text-align:center;
}
.grid-widget-column div {
	position:absolute;
	right:-0.5rem;
	bottom:0;
	width:1rem;
	height:1.25rem;
	transform:translateX(50%) translateY(0);
	z-index:2;
	text-align:center;
	line-height:2rem;
	background-color:rgb(250,250,250);
	cursor:ew-resize;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.grid-widget-column div::after {
	content:'';
	position:absolute;
	top:100%;
	left:0;
	border-width:0.25rem 0.5rem 0 0.5rem;
	border-style:solid;
	border-color:rgb(250,250,250) transparent transparent transparent;
}
.grid-widget-row {
	position:relative;
	left:calc(-1em - 1rem - 1rem);
	width:1em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-color:rgb(127,127,127);
}
.grid-widget-row input {
	width:4em;
	text-align:center;
	transform-origin:center center;
	transform:rotate(-90deg);
	cursor: vertical-text;
}
.grid-widget-row div {
	position:absolute;
	right:0;
	bottom:-0.5rem;
	width:1.25rem;
	height:1rem;
	transform:translateX(0) translateY(50%);
	z-index:2;
	text-align:center;
	line-height:2rem;
	background-color:rgb(250,250,250);
	cursor:ns-resize;
	-moz-user-select:none;
	-webkit-user-select:none;
}
.grid-widget-row div::after {
	content:'';
	position:absolute;
	top:0;
	left:100%;
	border-width:0.5rem 0 0.5rem 0.25rem;
	border-style:solid;
	border-color:transparent transparent transparent rgb(250,250,250);
}

/*\

split

\*/

.grid-widget-area {
	position:relative;
	display:grid;
	grid-gap:inherit;
}
.grid-widget-area-column {
	justify-self:end;
	position:relative;
	left:1rem;
	width:1rem;
	cursor:pointer;
}
.grid-widget-area-column:hover {
	background-color:rgb(225,225,225);
}
.grid-widget-area:hover .grid-widget-area-column::before {
	position:absolute;
	top:0;
	left:0;
	content:'';
	border-width:0.25rem 0.5rem 0 0.5rem;
	border-style:solid;
	border-color:rgb(225,225,225) transparent transparent transparent;
}
.grid-widget-area:hover .grid-widget-area-column::after {
	position:absolute;
	bottom:0;
	left:0;
	content:'';
	border-width:0 0.5rem 0.25rem 0.5rem;
	border-style:solid;
	border-color:transparent transparent rgb(225,225,225) transparent;
}
.grid-widget-area-row {
	align-self:end;
	position:relative;
	top:1rem;
	height:1rem;
	cursor:pointer;
}
.grid-widget-area-row:hover {
	background-color:rgb(225,225,225);
}
.grid-widget-area:hover .grid-widget-area-row::before {
	position:absolute;
	top:0;
	left:0;
	content:'';
	border-width:0.5rem 0 0.5rem 0.25rem;
	border-style:solid;
	border-color:transparent transparent transparent rgb(225,225,225);
}
.grid-widget-area:hover .grid-widget-area-row::after {
	position:absolute;
	top:0;
	right:0;
	content:'';
	border-width:0.5rem 0.25rem 0.5rem 0;
	border-style:solid;
	border-color:transparent rgb(225,225,225) transparent transparent;
}

/*\

join

\*/

.grid-widget-area-join-column {
	justify-self:end;
	position:relative;
	left:1rem;
	width:1rem;
	cursor:pointer;
}
.grid-widget-area-join-column:hover {
	background-color:rgb(250,250,250);
}
.grid-widget-area-join-column:hover::before {
	position:absolute;
	top:0;
	left:0;
	content:'';
	border-width:0.25rem 0.5rem 0 0.5rem;
	border-style:solid;
	border-color:rgb(225,225,225) transparent transparent transparent;
}
.grid-widget-area-join-column:hover::after {
	position:absolute;
	bottom:0;
	left:0;
	content:'';
	border-width:0 0.5rem 0.25rem 0.5rem;
	border-style:solid;
	border-color:transparent transparent rgb(225,225,225) transparent;
}
.grid-widget-area-join-row {
	align-self:end;
	position:relative;
	top:1rem;
	height:1rem;
	cursor:pointer;
}
.grid-widget-area-join-row:hover {
	background-color:rgb(250,250,250);
}
.grid-widget-area-join-row:hover::before {
	position:absolute;
	top:0;
	left:0;
	content:'';
	border-width:0.5rem 0 0.5rem 0.25rem;
	border-style:solid;
	border-color:transparent transparent transparent rgb(225,225,225);
}
.grid-widget-area-join-row:hover::after {
	position:absolute;
	right:0;
	left:0;
	content:'';
	border-width:0.5rem 0.25rem 0.5rem 0;
	border-style:solid;
	border-color:transparent rgb(225,225,225) transparent transparent;
}