html, body, #annotation-app { width: 100%; height: 100% }

#annotation-app {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

#controlbar {
	user-select: none;
	--controlbar-height: 8rem;
	/* as a flex child item */
	flex: 0 0 auto;
	border-bottom: solid 2px black;
	/* as a flex container */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

#viewer {
	flex: 1 1 auto;
}

/* CONTROL BAR ############################ */

.selected {
	box-shadow: inset 0 0 0.3rem #000000;
}

.btn-mode {
	width: var(--controlbar-height);
	height: var(--controlbar-height);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
	cursor: pointer;
}

.btn-control {
	--controlbar-text: 3rem;
	--vertical-padding: calc( (var(--controlbar-height) - var(--controlbar-text)) / 2 );
	font-size: var(--controlbar-text);
	line-height: var(--controlbar-text);
	padding: var(--vertical-padding) var(--controlbar-text);
	cursor: pointer;
}

.btn-mode:hover, .btn-control:hover {
	background-color: rgb(200,200,200);
}

#mode-house  { background-image: url("/public/img/controlbar/house.svg"); }
#mode-roof   { background-image: url("/public/img/controlbar/roof.svg"); }
#mode-window { background-image: url("/public/img/controlbar/window.svg"); }
#mode-door   { background-image: url("/public/img/controlbar/door.svg"); }

#file-input { display: none }