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

:root {
	--icon-badge-hue                    : 120;
	--icon-badge-hue-backend-active     : 0;
	--icon-badge-hue-database-closed    : 120;
	--icon-badge-hue-database-closing   : 90;
	--icon-badge-hue-database-dropped   : 240;
	--icon-badge-hue-database-dropping  : 180;
	--icon-badge-hue-database-executing : 0;
	--icon-badge-hue-database-opened    : 30;
	--icon-badge-hue-database-opening   : 60;
	--icon-badge-lightness              : 75%;
	--icon-badge-saturation             : 100%;
	--icon-badge-size                   : 24px;
	--icon-image-fill                   : linear-gradient(to bottom left, #ccc, #bbb);
	--icon-image-size                   : 32px;
	--icon-opacity-database-dropped     : 0.2;
	--icon-size                         : 48px;
	--icon-spinner-color                : #fff;
}

#icons {
	display         : flex;
	gap             : 4px;
	justify-content : center;
}

#icons > .icon {
	height   : var(--icon-size);
	position : relative;
	width    : var(--icon-size);
}

#icons > .icon > * {
	box-sizing : border-box;
	position   : absolute;
}

#icons > .icon > .image {
	background : var(--icon-image-fill);
	height     : var(--icon-image-size);
	margin     : calc(0.5 * (var(--icon-size) - var(--icon-image-size)));
	width      : var(--icon-image-size);
}

#icons > .icon > .spinner {
	animation             : spin 1s linear infinite;
	background            : conic-gradient(var(--icon-spinner-color) 30%, transparent 30%, transparent 60%, var(--icon-spinner-color));
	display               : none;
	height                : 100%;
	mask-image            : url('./images/spinner.svg');
	mask-position         : center;
	mask-repeat           : no-repeat;
	-webkit-mask-image    : url('./images/spinner.svg');
	-webkit-mask-position : center;
	-webkit-mask-repeat   : no-repeat;
	width                 : 100%;
}

@keyframes spin {
	from {transform: rotate(  0deg)}
	to   {transform: rotate(360deg)}
}

#icons > .icon > .badge {
	align-content   : center;
	background      : hsl(var(--icon-badge-hue), var(--icon-badge-saturation), var(--icon-badge-lightness));
	border          : 2px solid white;
	border-radius   : 50%;
	bottom          : -4px;
	color           : white;
	display         : flex;
	font-size       : 0.9em;
	font-weight     : bold;
	height          : var(--icon-badge-size);
	justify-content : center;
	padding-right   : 1px;
	padding-top     : 1px;
	right           : -4px;
	width           : var(--icon-badge-size);
}

@media (hover: hover) {
	#icons > .icon > .badge {
		padding-right : 0;
		padding-top   : 2px;
	}

	#icons > .icon > .badge.checkmark {
		padding-top : 0;
	}
}

/****************************************************************************************************
	icnBackend
*/

#icons > #icnBackend > .image {
	mask-image            : url('./images/icon-tryton.svg');
	mask-position         : center;
	mask-repeat           : no-repeat;
	-webkit-mask-image    : url('./images/icon-tryton.svg');
	-webkit-mask-position : center;
	-webkit-mask-repeat   : no-repeat;
}

#icons > #icnBackend.active > .spinner {
	display : block;
}

#icons > #icnBackend.active > .badge {
	background-color : hsl(var(--icon-badge-hue-backend-active), var(--icon-badge-saturation), var(--icon-badge-lightness));
}

/****************************************************************************************************
	icnDatabase
*/

#icons > #icnDatabase.dropped {
	opacity : var(--icon-opacity-database-dropped);
}

#icons > #icnDatabase > .image {
	mask-image            : url('./images/icon-database.svg');
	mask-position         : center;
	mask-repeat           : no-repeat;
	-webkit-mask-image    : url('./images/icon-database.svg');
	-webkit-mask-position : center;
	-webkit-mask-repeat   : no-repeat;
}

#icons > #icnDatabase.closing   > .spinner,
#icons > #icnDatabase.dropping  > .spinner,
#icons > #icnDatabase.executing > .spinner,
#icons > #icnDatabase.opened    > .spinner,
#icons > #icnDatabase.opening   > .spinner {
	display : block;
}

#icons > #icnDatabase.closed    > .badge {background-color : hsl(var(--icon-badge-hue-database-closed),    var(--icon-badge-saturation), var(--icon-badge-lightness))}
#icons > #icnDatabase.closing   > .badge {background-color : hsl(var(--icon-badge-hue-database-closing),   var(--icon-badge-saturation), var(--icon-badge-lightness))}
#icons > #icnDatabase.dropped   > .badge {background-color : hsl(var(--icon-badge-hue-database-dropped),   var(--icon-badge-saturation), var(--icon-badge-lightness))}
#icons > #icnDatabase.dropping  > .badge {background-color : hsl(var(--icon-badge-hue-database-dropping),  var(--icon-badge-saturation), var(--icon-badge-lightness))}
#icons > #icnDatabase.executing > .badge {background-color : hsl(var(--icon-badge-hue-database-executing), var(--icon-badge-saturation), var(--icon-badge-lightness))}
#icons > #icnDatabase.opened    > .badge {background-color : hsl(var(--icon-badge-hue-database-opened),    var(--icon-badge-saturation), var(--icon-badge-lightness))}
#icons > #icnDatabase.opening   > .badge {background-color : hsl(var(--icon-badge-hue-database-opening),   var(--icon-badge-saturation), var(--icon-badge-lightness))}