html,body{
	background:var(--color-bg);
	color:var(--color-fg);
	font-size:95%;
	height:100%;
}
a{
	&.button{
		appearance:button;
		background:var(--color-bg);
		border:1px solid var(--color-stroke);
		display:inline-flex;
		gap:0.25em;
		margin-left:0.25em;
		text-decoration:none;
	}
	border-color:var(--color-stroke);
	color:var(--color-fg);
}
input,
select,
textarea{
	background:var(--color-bg);
	border-radius:1px;
	border:1px solid var(--color-stroke);
	color:var(--color-fg);
	font-size:80%;
}
select>option{
	background:var(--color-bg);
	color:var(--color-fg);
}
button{
	&[type=button].cancel::before,
	&[type=reset]::before,
	&[type=submit]::before{
		font-family:"Material Design Icons";
		font-weight:normal;
	}
	&[type=button].cancel::before{content:"\f073a";}
	&[type=reset]::before{content:"\f054d";}
	&[type=submit]::before{content:"\f0055";}
	>span{
		margin-right:2px;
	}
	align-items:center;
	display:inline-flex;
	flex-direction:row;
	gap:0.25em;
	justify-content:center;
	margin:0px;
	white-space:nowrap;
}
body>main ui-controls ui-menu a,
a.button,
button,
input::file-selector-button,
input[type=button],
input[type=reset],
input[type=submit]{
	background:var(--color-bg);
	border-radius:3px;
	border:1px solid var(--color-stroke);
	color:var(--color-fg);
	padding-block:1px;
	padding-inline:6px;
}
ui-controls{
	&:empty{
		display:none;
	}
	ui-menu>menu>li>a,
	>button{
		padding:0.15em 0.75em;
	}
	align-items:center;
	background:var(--color-bg);
	border:1px solid var(--color-stroke);
	border-width:1px 0 0 0;
	color:var(--color-fg);
	display:flex;
	gap:0.5em;
	justify-content:right;
	padding:0.25em;
}
ui-header{
	>ui-controls{
		border:0px;
		padding:0px;
	}
	button{
		font-weight:normal;
		font-size:90%;
	}
	align-items:center;
	background:var(--color-bg);
	border:1px solid var(--color-stroke);
	color:var(--color-fg);
	column-gap:0.25em;
	display:grid;
	font-weight:bold;
	padding:0.25em;
}
/* Layout */
body{
	::placeholder{
		color:var(--color-fg);
	}
	>header{
		>section{
			>img{
				color:var(--color-fg);
				height:100%;
				max-height:25px;
			}
			align-items:center;
			display:flex;
			justify-content:space-between;
		}
		background:var(--color-bg);
		border-bottom:1px solid var(--color-stroke);
		color:var(--color-fg);
		grid-area:header;
		padding:0.5em;
	}
	>nav{
		>section{
			>input[type='checkbox']{
				display:none;
			}
			>label{
				display:none;
			}
			>ui-menu{
				>menu{
					display:flex;
					gap:1px;
				}
				display:inline-block;
			}
		}
		background:var(--color-bg);
		color:var(--color-fg);
		grid-area:nav;
	}
	>aside{
		&:empty{
			display:none;
		}
		background:var(--color-bg);
		border-right:1px solid var(--color-stroke);
		color:var(--color-fg);
		grid-area:aside;
		min-width:200px;
		width:fit-content;
	}
	>main{
		background:var(--color-bg);
		color:var(--color-fg);
		grid-area:main;
		margin:0.5em;
		min-height:100%;
		min-width:1000px;
		width:fit-content;
	}
	>footer{
		background:var(--color-bg);
		color:var(--color-fg);
		font-size:70%;
		grid-area:footer;
		padding:0.5em;
		text-align:right;
	}
	display:grid;
	grid-template-areas:
		'header header'
		'nav nav'
		'aside main'
		'footer footer'
	;
	grid-template-columns:min-content auto;
	grid-template-rows:min-content min-content min-content auto;
}
@media (max-width:576px){
	body{
		>nav{
			>input[type='checkbox']{
				&:checked{
					~div{
						display:block;
						>nav{
							>a{
								display:grid;
							}
						}
					}
				}
				&:not(:checked){
					~div>nav>a{
						display:none;
					}
				}
			}
			>label{
				color:var(--color-fg);
				cursor:pointer;
				display:block;
				padding:0.25em 1em 0 0;
				text-align:right;
				float:right;
			}
		}
		grid-template-areas:
			'header'
			'nav'
			'main'
			'aside'
			'footer'
		;
		grid-template-columns:auto;
		grid-template-rows:min-content min-content min-content min-content auto;
	}
}