:root {
	--toolbar-height: 31px;
	--toolbar-margins: 0.25rem;
	--toolbar-margin-bottom: 0.5rem;
	/* form sizing and spacing */
	--form-group-b: 10px;
	--single-input-w: 11em;
	/* badge-danger */
	--color-debug-bg: #dc3545;
	--color-debug-fg: white;
	/* badge-warning */
	--color-test-bg: #ffc107;
	--color-test-fg: #212529;
}

/* Toolbar */
#toolbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: var(--toolbar-margins);
	margin-bottom: var(--toolbar-margin-bottom);
	z-index: 1000;
}

#toolbar .btn-outline-secondary:not(:hover):not(:active) {
	background-color: white;
}

body {
	padding-top: calc(var(--toolbar-height) + var(--toolbar-margins) + var(--toolbar-margin-bottom));
}

#toolbar > :not(:first-child) {
	margin-left: var(--toolbar-margins);
}

#toolbar input#tag-input {
	width: 100px; /* some minimum width - it will flex wider than this */
}

/* NB: .version-indicator should have .badge class assigned in DOM */
.version-indicator {
	display: none;
	font-size: large;
	padding: 6px 8px;
}

body.DEBUG .version-indicator {
	display: block;
	background-color: var(--color-debug-bg);
	color: var(--color-debug-fg);
}

body.DEBUG .version-indicator::after {
	content: "DEBUG";
}

body.TEST .version-indicator {
	display: block;
	background-color: var(--color-test-bg);
	color: var(--color-test-fg);
}

body.TEST .version-indicator::after {
	content: "TEST";
}