*, *::before, *::after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:focus{
	outline: none;
}



::-webkit-scrollbar{
	height: 8px;
	width: 8px;
	background: color-mix(in srgb, var(--background) 95%, var(--text-color));
}

::-webkit-scrollbar-thumb{
	background: color-mix(in srgb, var(--background) 80%, var(--text-color));
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover{
	background: color-mix(in srgb, var(--background) 70%, var(--text-color));
}

::-webkit-scrollbar-thumb:active{
	background: color-mix(in srgb, var(--background) 60%, var(--text-color));
}

@supports not selector(::-webkit-scrollbar) {
	*{
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--background) 96%, var(--text-color))
		                 color-mix(in srgb, var(--background) 85%, var(--text-color));
	}
}



html{
	height: 100%;
	tab-size: 4;
	font-size: var(--text-size);
	color: var(--text-color);
	line-height: 1.6;

	/** Not adjust character width. */
	text-size-adjust: none;
}

body{

	/* Disables tap highlight on apple mobile devices. */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a{
	color: inherit;
	text-decoration: none;
	cursor: pointer;

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

ul{
	list-style-type: none;
}

hr{
	height: 1px;
	border: none;
}

img, iframe{
	border: none;
}

input, select, button, textarea, table, optgroup, pre{
	font-size: inherit;
	font-family: inherit;
	color: inherit
}

input, select, button, textarea, label, img, svg{
	vertical-align: top;
}

/* For ios safari. */
input, select, button, textarea{
	border-radius: 0;
}

button{
	cursor: pointer;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}


[hidden]{
	display: none !important;
}

[disabled]{
	opacity: 0.4;
	cursor: not-allowed !important;
	pointer-events: none;

	& [disabled]{
		opacity: 1;
	}
}


/* Theme variables. see https://css-tricks.com/come-to-the-light-dark-side/ */
:root{
	color-scheme: light dark;

	--primary-color: ActiveText;
	--background: light-dark(white, #333);
	--text-color: CanvasText;
	--border-color: light-dark(#808080, #888);
	--selected-color: SelectedItem;
	--selected-text-color: SelectedItemText;

	--input-background: light-dark(#e5e5e5, #444);
	--input-text-color: FieldText;
	--link-color: LinkText;

	--popup-shadow-color: light-dark(rgba(0, 0, 0, 0.5), black);
	--popup-background: light-dark(white, #333);
	--popup-border-radius: 4px;
	--popup-border-color: var(--border-color);
	--popup-border-width: 0;
	--popup-shadow-blur-radius: 6px;
	
	--tooltip-background: light-dark(white, #333);
	--tooltip-text-color: CanvasText;

	--info-color: #3369fa;
	--success-color: #29bc04;
	--error-color: #e10000;
	--warning-color: #f3b907;

	--text-size: 14px;
	--border-radius: 4px;
	--focus-shadow-blur-radius: 4px;
}