/*
	CSS Stylesheet „ChildList“
	Version 2023-11-21a
	© 2023 m-ds GmbH
*/

#child-list, #child-list * {
	box-sizing : border-box;
}

#child-list > div {
	background      : linear-gradient(hsl(var(--child-list-hue-none), 10%, 97%), hsl(var(--child-list-hue-none), 10%, 97%));
	display         : flex;
	font-family     : var(--child-list-font);
	font-size       : var(--child-list-font-size);
	justify-content : space-between;
	padding         : 0.2em 0.4em;
}

#child-list > div:nth-child(even) {
	background : linear-gradient(hsl(var(--child-list-hue-none), 10%, 95%), hsl(var(--child-list-hue-none), 10%, 95%));
}

#child-list > div > div:first-child {
	align-items : baseline;
	color       : var(--child-list-color-name-primary);
	display     : flex;
	flex-grow   : 1;
	flex-shrink : 1;
	gap         : 0.3em;
	overflow    : hidden;
	text-shadow : 0 1px 1px white;
}

#child-list > div > div:first-child > span {
	pointer-events : none;
}

#child-list > div > div:first-child > span:last-child {
	color     : var(--child-list-color-name-secondary);
	font-size : var(--child-list-font-size-small);
}

#child-list.sortedByPrename > div > div:first-child {
	color           : var(--child-list-color-name-secondary);
	flex-direction  : row-reverse;
	font-size       : var(--child-list-font-size-small);
	justify-content : flex-end;
}

#child-list.sortedByPrename > div > div:first-child > span:last-child {
	color     : var(--child-list-color-name-primary);
	font-size : var(--child-list-font-size-large);
}

#child-list                 > div.hasNotes > div:first-child > span:first-child,
#child-list.sortedByPrename > div.hasNotes > div:first-child > span:last-child {
	color : var(--meki-blue);
}

#child-list                 > div.hasNotes > div:first-child > span:last-child,
#child-list.sortedByPrename > div.hasNotes > div:first-child > span:first-child {
	color : var(--meki-blue-1);
}

#child-list > div > div:last-child {
	display     : flex;
	flex-shrink : 0;
	gap         : 0.3em;
}

#child-list > div > div:last-child > button {
	border        : none;
	border-radius : 100vh;
	cursor        : pointer;
	font-size     : 0;
	width         : 75px;
}

#child-list > div > div:last-child > button:nth-child(1) {
	background  : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-none), 10%, 60%), hsl(var(--child-list-hue-none), 10%, 90%));
	color       : hsl(var(--child-list-hue-none), 10%, 20%);
	font-size   : 0.618em;
	text-shadow : 0 1px 1px hsl(var(--child-list-hue-none), 10%, 80%);
}

#child-list > div > div:last-child > button:nth-child(2) {
	background  : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-registered), 30%, 90%), white);
	color       : #1f3d02;
	text-shadow : 0 1px 1px hsl(var(--child-list-hue-registered), 80%, 80%);
}

#child-list > div > div:last-child > button:nth-child(3) {
	background  : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-calledInSick), 30%, 90%), white);
	color       : #1f3d02;
	text-shadow : 0 1px 1px hsl(var(--child-list-hue-calledInSick), 80%, 80%);
}

#child-list > div > div:last-child > button:nth-child(4) {
	background  : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-missingExcused), 30%, 90%), white);
	color       : #1f3d02;
	text-shadow : 0 1px 1px hsl(var(--child-list-hue-missingExcused), 80%, 80%);
}

#child-list > div > div:last-child > button:nth-child(5) {
	background  : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-deregistered), 30%, 90%), white);
	color       : #1f3d02;
	text-shadow : 0 1px 1px hsl(var(--child-list-hue-deregistered), 80%, 80%)
}

#child-list > div > div:last-child.calledInSick     > button:nth-child(3) {background: linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-calledInSick),     90%, 60%), hsl(var(--child-list-hue-calledInSick),     90%, 90%)); font-size: 0.618em}
#child-list > div > div:last-child.deregistered     > button:nth-child(2) {background: linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-registered),       90%, 60%), hsl(var(--child-list-hue-registered),       90%, 90%)); font-size: 0.618em}
#child-list > div > div:last-child.deregistered     > button:nth-child(5) {background: linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-deregistered),     90%, 60%), hsl(var(--child-list-hue-deregistered),     90%, 90%)); font-size: 0.618em}
#child-list > div > div:last-child.missingExcused   > button:nth-child(4) {background: linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-missingExcused),   90%, 60%), hsl(var(--child-list-hue-missingExcused),   90%, 90%)); font-size: 0.618em}
#child-list > div > div:last-child.registered       > button:nth-child(2) {background: linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-registered),       90%, 60%), hsl(var(--child-list-hue-registered),       90%, 90%)); font-size: 0.618em}

#child-list > div > div:last-child.none > button:nth-child(1) {
	visibility : hidden;
}