/*
	CSS Stylesheet „console“
	Version 2023-11-16a
	© 2023 m-ds GmbH

	dependencies:
	- relates to JavaScript Class „Console“
*/

:root {
	--console-background          : rgba(0, 0, 0, 0.9);
	--console-background-hover    : rgba(255, 255, 255, 0.1);
	--console-hue-failure         : 15;
	--console-hue-special         : 195;
	--console-hue-success         : 75;
	--console-hue-warning         : 45;
	--console-transition-duration : 300ms;
}

.console {
	background  : var(--console-background);
	border-top  : 1px solid black;
	bottom      : 0;
	box-sizing  : border-box;
	color       : white;
	cursor      : default;
	font-family : 'DejaVu Sans Mono', Consolas, monospace;
	font-size   : 12px;
	height      : 0;   /* 19px; */
	opacity     : 0.1; /* production: 0 */
	overflow    : auto;
	position    : fixed;
	transition  : height var(--console-transition-duration), opacity var(--console-transition-duration), visibility var(--console-transition-duration);
	visibility  : visible; /* production: hidden */
	width       : 100%;
	z-index     : 1000;
}

.console.visible {
	height     : 25%;
	opacity    : 1;
	visibility : visible;
}

.console > * {
	display : flex;
	gap     : 1em;
	padding : 2px 4px;
}

.console > *.failure {
	color : hsl(var(--console-hue-failure), 100%, 50%);
}

.console > *.special {
	color : hsl(var(--console-hue-special), 100%, 50%);
}

.console > *.success {
	color : hsl(var(--console-hue-success), 100%, 50%);
}

.console > *.warning {
	color : hsl(var(--console-hue-warning), 100%, 50%);
}

.console > * > *:first-child {
	white-space : nowrap;
}

@media (hover: hover) {
	.console > *:hover {
		background : var(--console-background-hover);
	}
}