@layer reset, default, basic, component, misc;

@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	html, body {
		height: 100dvh;
		overflow: hidden;
	}
	button, input, a {
		background: unset;
		border: unset;
		font: inherit;
		color: inherit;
	}
	button {
		cursor: pointer;
	}
}
@layer default {
	body {
		background-color: var(--theme-bg-0);
		color: var(--theme-fg-0);
		font-family: var(--theme-font);
		tab-size: 4;
		line-height: 1.25;
	}
	body::selection {
		background-color: var(--theme-selection-bg);
		color: var(--theme-selection-fg);
	}
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--theme-scrollbar-fg) var(--theme-scrollbar-bg);
	}
	a[target="_blank"]::after {
		content: "\e89e";
		font-family: "Material Symbols Outlined";
		font-size: 0.75em;
		display: inline-block;
		vertical-align: middle;
		margin-inline-start: 0.25em;
	}
	code, pre {
		font-family: var(--theme-font-monospace);
	}
}
@layer misc {
	#app_root {
		height: 100dvh;
	}
	.test {
		position: absolute;
		inset: -0;
	}
}