/* Syntaxe historique */
/*@import url("./ui.css") layer(original);*/

/* theme */
@import url("./base.css") layer(base);
@import url("./fonts.css") layer(base);
@import url("./variables.css") layer(vars);
@import url("./components/progress.css") layer(progress_cmp);
@import url("./components/switch.css") layer(switch_cmp);

/*@import url("../css_old/pico.min.css") layer(pico);*/

@layer theme {


	body {
		height: 100vh;

		width:100%;
		background-color: var(--bg_color);
		color:var(--txt_color);
		font-family: var(--txt_font);
		font-size: var(--txt_size);

		display: flex;
  	flex-direction: column;
		justify-content: space-between;
		align-items: center;

		&.login h1{
			display: none;
		}
	}

	header[role="banner"]{
		width: 100%;
		padding: 0 var(--padding-m);
		background: var(--nav_bg_color);
		border-bottom: 1px solid var(--color-secondary);

	}

	nav[role="navigation"] {
		& ul{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 ;
			padding: 0 0px;
		
		
			& li{
				padding-inline: 1rem;
				&:first-child{
					flex-grow: 1;
				}
			}
			& li > img {
				
				max-width: 64px;
				min-width: 32px;
			}

			& a:is(:link, :hover, :visited){
				display: flex;
				align-items: center;
				flex-direction: row;
				text-decoration: none;
				text-transform: capitalize;
				font-size: calc(var(--txt_size) * 0.85);
				font-weight: 700;
				font-variant: petite-caps;
				color:var(--nav_text_color);

				&:hover{
					text-decoration: underline;
				}
			}

			& li.login, li.logout{
				& a{
					color: var(--color-primary);
				}	
			}			
		}/* ul */
	}

	/**/
	form{
		max-width: 40rem;
	}
	fieldset{
		border: 1px solid var(--color-secondary);
		background: var(--zinc_100);
		padding: var(--padding-m);
	}
	.legend{
		display: block;
		width: 100%;
		background: var(--zinc-200);
		text-align: center;
		font-size: 1em;
		padding-block: 0.8rem;
		border: 1px solid var(--color-secondary);
		border-block-end: none;		
	}

	
	input:is([type="text"], [type="password"], [type="submit"]){
		font-family: var(--fonts-regular);
		font-size: calc(var(--txt_size) * 0.85);
		margin: 0;
		outline: none;

		line-height: 1.21428571em;
		padding: .67857143em 1em;
		background: #fff;
		border: 1px solid rgba(34,36,38,.15);

		width: 100%;
		color: #000000de;
		border-radius: .28571429rem;
		box-shadow: 0 0 0 0 transparent inset;

		&:hover{
			background: var(--color-input-background);
			border-color: var(--color-input-border-hover);
			color: var(--color-input-text);
		}	
		&:input:focus{
			background: var(--color-input-background);
			border-color: var(--color-primary);
			color: var(--color-input-text);
		}


	}


	dd{
		margin-block-end: 1rem;
	}

	dt.staylogged{
		display: flex;
		flex-direction: row-reverse;
		justify-content: start;
		align-items: center;
		& input{
			width: initial;
			margin-inline: 0 0.5rem;
		}
		& label{
			font-size: calc(var(--txt_size) * 0.75);
		}
		& [role="switch"] { /* surcharge var --s de "switch.css" */
			--s: calc(var(--txt_size) * 0.75);
		}
	}

	label{font-size: calc(var(--txt_size) * 0.85);}


	.help{
		font-size: small;
	}

	.submit{
		margin-block-start: 2rem;

		& input{
			background: var(--color-primary);
  			color: var(--color-primary-contrast);
  			&:hover{
  				background: var(--color-primary-hover);
  				color: var(--color-primary-contrast);
  			}
		}
	}



	footer{
		margin-block: 1rem;
		font-size: small;
	}

	/* test */
	.alert-notification {
		
		--notif_bg: oklch(var(--l-action) var(--c-neon) var(--h-brand));
		--notif_txt: contrast-color(var(--notif_bg));

		opacity: 0;
		background-color: var(--notif_bg);
		color: var(--notif_txt);

		padding: 0.8rem;
		position: absolute;
		right: 0.5rem; bottom: 0.5rem;

	 animation-name: blinker;
	    animation-duration: 3s;
	    animation-timing-function: linear;
	 

		&.error{
			--h-brand:17;
		}
		&.info{
			--h-brand:164;
			
		}		
	}


	@keyframes blinker {  
	    0% { /*opacity: 1.0;*/ background-color:transparent;opacity: 1;}
	    20% { /*opacity: 0.0;*/ background-color:var(--notif_bg); opacity: 1;}
	    100% { /*opacity: 0.7;*/ background-color:transparent; opacity: 0;}
	}

/**** index.tpl *****/
	.dav-infos{
		display: grid;
		grid-template-areas: "quota quota" "hr hr" "urls trash" ;

	

			& quota-block{
				grid-area: quota;

				& h3{
				font-weight: 500;
				font-size: 2.2rem;
				line-height: 1.1em;
				color: rgb(17 24 39);

					& sup{
						font-size: 1rem;
						font-weight: 400;
		    			line-height: 1.5rem;

						margin-inline-start: 0.75rem;
						top: -1rem;
						position: relative;
						vertical-align: baseline;    			
					}
				}
			}

			& hr{
				grid-area: hr;
			}
			& trash-block{
				grid-area: trash;
				
			}
			& url-block{
				grid-area: urls;
			}

			& trash-block, url-block{
				& a{
						font-size: 0.8rem;
					}				
				& dl, dt, dd{
				color: rgb(17 24 39);
				font-weight: 600;
				font-size: 0.875rem;
				margin: 0;
				}
				& dt{
					font-variant: small-caps;
				}
				& dd{
					font-weight: 400;
					margin-bottom: 1rem;

	
				}
			}	
	}
}