/* Loading and notification */

.loading {
    --color: var(--color-yellow);
}
.success {
    --color: var(--color-green);
}
.error {
    --color: var(--color-err);
}
.warning {
    --color: var(--color-warning);
}
#loading-screen img, img.rotate {
    animation: rotation 2s infinite linear;
    margin-right: 1em;
}

.confirmation-box{
    border-color : var(--color-err);
    min-width : auto;
    min-height : auto;
}

@keyframes rotation {
    from {
	transform: rotate(0deg);
    }
    to {
	transform: rotate(359deg);
    }
}
.loader-icon {
    width: 1em;
    height: 1em;
    border: calc(1em/10) solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    margin-inline: 1ch;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader-icon-disabled {
    width: 1em;
    height: 1em;
    margin-inline: 1ch;
    box-sizing: border-box;
    display:inline-block;
}

#notifications {
    z-index: 99;
    position: fixed;
    top: 6em;
    left: 0em;
    padding-inline: 15vw;
    width: 100vw;
    box-sizing: border-box;
    .notification {
	font-size: 1.5em;
	padding: 0.5em;
	margin: 1em;
	background-color: color-mix(in hsl, var(--color) 50%, white);
	color: var(--color);
	border: 3px solid var(--color);
    }
    .notification img {
	max-height: 2em;
	vertical-align: middle;
	margin: 0.3em;
    }
}

body:has(dialog[open]) #notifications{
    display : none;
}

#dialog__notifications{
    height: 4ch;
    
    .notification {
	padding: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
	background-color: color-mix(in hsl, var(--color) 50%, white);
	color: var(--color);
	border: 1px solid var(--color);
	line-height: 2;
	font-size: small;
    }
    .notification img {
	max-height: 1em;
	vertical-align: middle;
	margin: 0.3em;
    }
}