*, *::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-color) 95%, var(--text-color));
}

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

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

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

/* Scrollbar which will become visible when hover. */
.scrollbar-overlay{
	scrollbar-gutter: stable;

	&::-webkit-scrollbar, &::-webkit-scrollbar-thumb{
		background:rgba(0, 0, 0, 0);
	}

	&::-webkit-scrollbar{
		height: 6px;
		width: 6px;
	}

	&:hover::-webkit-scrollbar-thumb{
		background: color-mix(in srgb, var(--text-color) 16%, rgba(0, 0, 0, 0));
		border-radius: 4px;
	}
}

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



html{
	height: 100%;
	tab-size: 4;
	font-size: var(--text-size);
	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;
	}

	&:visited{
		color: var(--visited-color);
	}
}

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;
}



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

	& [disabled]{
		opacity: 1;
	}
}

[hidden]{
	display: none !important;
}



.size-small{
	font-size: 13;
}

.size-medium{
	font-size: 14;
}

.size-large{
	font-size: 16;
}

.size-default{
	font-size: var(--text-size);
}

.size-inherit{
	font-size: inherit;
}



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

	--primary-color: ActiveText;
	--background-color: light-dark(white, #333);
	--text-color: CanvasText;
	--border-color: light-dark(#808080, #888);
	--selected-color: SelectedItem;
	--selected-text-color: SelectedItemText;
	--field-color: light-dark(#e5e5e5, #444);
	--field-text-color: FieldText;
	--link-color: LinkText;
	--visited-color: VisitedColor;
	
	--popup-shadow-color: light-dark(rgba(0, 0, 0, 0.5), black);
	--popup-background-color: light-dark(white, #333);
	--info-color: #3369fa;
	--success-color: #29bc04;
	--error-color: #e10000;
	--warning-color: #f3b907;

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