/*
	CSS Stylesheet „statistics“
	Version 2023-11-23a
	© 2023 m-ds GmbH
*/

#line {
	display         : flex;
    gap             : 0.5em;
	justify-content : space-between;
}

#line > .controls {
	margin-left : 0.5em;
}

#line > .controls > * {
	height : 90%;
}

#line > .controls > button {
	background    : linear-gradient(#edf, #dbf);
	background    : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-none), 10%, 60%), hsl(var(--child-list-hue-none), 10%, 90%));
	border        : none;
	border-radius : 100vh;
	color         : #50a;
	color         : hsl(var(--child-list-hue-none), 10%, 20%);
	outline       : none;
	text-shadow   : 0 1px 1px #edf;
	text-shadow   : 0 1px 1px hsl(var(--child-list-hue-none), 10%, 80%);
	padding       : 0 1em;
}

#line > .controls > #btn_clear_search {
	outline : none;
	width   : 50px;
}

#line > .controls > #btn_toggle_groups {
	outline : none;
}

#line > .controls > #btn_toggle_name {
	outline : none;
}

#line > .controls > #edt_search {
	flex-grow   : 1;
	flex-shrink : 1;
	outline     : none;
	overflow    : hidden;
	width       : 0;
}

@media (hover: hover) {
	#line > .controls > button {
		cursor : pointer;
	}

	#line > .controls > button:hover {
		background : linear-gradient(#fff, #b9f);
		color      : white;
	}
}

/****************************************************************************************************/

#statistics, #statistics * {
	box-sizing : border-box;
}

#statistics {
	display         : flex;
	font-size       : var(--child-list-font-size);
	gap             : 0.3em;
	justify-content : flex-end;
	padding         : 0 0.4em;
}

#statistics > button {
	align-items             : center;
	border                  : none;
	border-top-left-radius  : 25px;
	border-top-right-radius : 25px;
	cursor                  : pointer;
	display                 : flex;
	flex-direction          : column;
	font-size               : 0.75em;
	font-weight             : bold;
	height                  : 63px;
	justify-content         : flex-start;
	padding-top             : 0.17em;
	position                : relative;
	width                   : 75px;
}

#statistics > button > div:nth-child(2) {
	font-size : 0.3em;
}

#statistics > button > div:last-child {
	bottom   : 0;
	position : absolute;
	width    : 100%;
}

#statistics > #calledInSick {
	background : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-calledInSick), 30%, 90%), white);
	color      : #333;
}

#statistics > #deregistered {
	background : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-deregistered), 30%, 90%), white);
	color      : #333;
}

#statistics > #missingExcused {
	background : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-missingExcused), 30%, 90%), white);
	color      : #333;
}

#statistics > #none {
	background : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-none), 10%, 90%), white);
	color      : #333;
}

#statistics > #registered {
	background : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-registered), 30%, 90%), white);
	color      : #333;
}

/**********/

#statistics > #calledInSick > div:last-child {
	border-bottom : hsl(var(--child-list-hue-calledInSick), 90%, 45%) solid 0;
}

#statistics > #deregistered > div:last-child {
	border-bottom : hsl(var(--child-list-hue-deregistered), 90%, 45%) solid 0;
}

#statistics > #missingExcused > div:last-child {
	border-bottom : hsl(var(--child-list-hue-missingExcused), 90%, 45%) solid 0;
}

#statistics > #none > div:last-child {
	border-bottom : hsl(var(--child-list-hue-none), 10%, 45%) solid 0;
}

#statistics > #registered > div:last-child {
	border-bottom : hsl(var(--child-list-hue-registered), 90%, 45%) solid 0;
}