/*
	CSS Stylesheet „header“
	Version 2024-02-21a
	© 2024 m-ds GmbH
*/

header {
	display         : flex;
	gap             : 0.5em;
	grid-area       : header;
	justify-content : space-between;
	padding         : 0.5em;
}

header > * {
	width : 33.3%;
}

header > h1 {
	margin : 0;
}

header > #icons {
	align-items     : center;
	display         : flex;
	flex-grow       : 1;
	gap             : 0.5em;
	justify-content : center;
}

header > #icons > * {
	align-items     : center;
	display         : flex;
	fill            : white;
	height          : 2em;
	justify-content : center;
	width           : 2em;
}

header > #user {
	align-items     : center;
	display         : flex;
	gap             : 0.5em;
	justify-content : flex-end;
	visibility      : hidden;
}

/****************************************************************************************************
	facility name
*/

h1 > #facilityName {
	font-size   : 0.5em;
	font-weight : normal;
}

/****************************************************************************************************
	btnCompleteRefresh
*/

header > #user > #btnCompleteRefresh {
	align-items     : center;
	background      : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-missingExcused), 50%, 60%), hsl(var(--child-list-hue-missingExcused), 50%, 90%));
	border          : none;
	border-radius   : 2em;
	color           : hsl(var(--child-list-hue-missingExcused), 50%, 20%);
	display         : flex;
	height          : 2em;
	justify-content : center;
	outline         : none;
	padding         : 0 1em;
	text-shadow     : 0 1px 1px hsl(var(--child-list-hue-missingExcused), 50%, 80%);
	width           : 2em;
}

header > #user > #btnCompleteRefresh.busy {
	opacity        : 0.25;
	pointer-events : none;
}

@media (hover: hover) {
	header > h1, header > #user > #btnCompleteRefresh {
		cursor : pointer;
	}

	header > #user > #btnCompleteRefresh:hover {
		background : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-missingExcused), 100%, 60%), hsl(var(--child-list-hue-missingExcused), 100%, 90%));
	}
}

/****************************************************************************************************
	btnLogout
*/

header > #user > #btnLogout {
	align-items     : center;
	background      : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-missingUnexcused), 50%, 60%), hsl(var(--child-list-hue-missingUnexcused), 50%, 90%));
	border          : none;
	border-radius   : 2em;
	color           : hsl(var(--child-list-hue-missingUnexcused), 50%, 20%);
	display         : flex;
	height          : 2em;
	justify-content : center;
	outline         : none;
	padding         : 0 1em;
	text-shadow     : 0 1px 1px hsl(var(--child-list-hue-missingUnexcused), 50%, 80%);
	width           : 2em;
}

@media (hover: hover) {
	header > h1, header > #user > #btnLogout {
		cursor : pointer;
	}

	header > #user > #btnLogout:hover {
		background : linear-gradient(var(--child-list-gradient-angle), hsl(var(--child-list-hue-missingUnexcused), 100%, 60%), hsl(var(--child-list-hue-missingUnexcused), 100%, 90%));
	}
}

/****************************************************************************************************
	btnChangePin
*/

header > #user > #btnChangePin {
	align-items     : center;
	background      : white;
	border          : none;
	border-radius   : 2em;
	display         : flex;
	height          : 2em;
	justify-content : center;
	outline         : none;
	padding         : 0 1em;
}

@media (hover: hover) {
	header > h1, header > #user > #btnChangePin {
		cursor : pointer;
	}

	header > #user > #btnChangePin:hover {
		background : aqua;
	}
}