body, :root {
	height: 100%;
	overflow: hidden;
}

#root {
	height: 100%;
	display: flex;
	overflow: hidden;
}

*:focus-visible {
	/* Override the focus indicator color. The default is invisible for
	   some buttons on some platforms. For example, on MacOS/Chrome, the
	   default focus indicator has the same color as some of Joplin's
	   buttons. */
	outline: 2px solid orange;
}

/* Dialog styling */

dialog.dialog-modal-layer {
	width: 100%;
	height: 100%;
	max-width: unset;
	max-height: unset;

	margin: 0;
	padding: 0;

	border: none;
	background-color: transparent;
}

dialog.dialog-modal-layer::backdrop {
	background-color: transparent;
}

/* Dialog animation
   (see "Animating dialogs" on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#animating_dialogs) */
dialog.dialog-modal-layer {
	transition:
		opacity 0.2s ease-out,
		display 0.22s ease allow-discrete,
		overlay 0.22s ease allow-discrete;
}

dialog.dialog-modal-layer:not([open]) {
	opacity: 0;
}

dialog.dialog-modal-layer[open] {
	opacity: 1;
}

@starting-style {
	dialog.dialog-modal-layer[open] {
		opacity: 0;
	}
}


/* Scrollbar styling */

* {
	scrollbar-width: thin;
	scrollbar-color: rgba(100, 100, 100, 0.7) rgba(0, 0, 0, 0.1);
}

@supports selector(::-webkit-scrollbar) {
	*::-webkit-scrollbar {
		width: 7px;
		height: 7px;
	}

	*::-webkit-scrollbar-corner {
		background: none;
	}

	*::-webkit-scrollbar-track {
		border: none;
	}

	*::-webkit-scrollbar-thumb {
		background: rgba(100, 100, 100, 0.3);
		border-radius: 5px;
	}

	*::-webkit-scrollbar-track:hover {
		background: rgba(0, 0, 0, 0.1);
	}

	*::-webkit-scrollbar-thumb:hover {
		background: rgba(100, 100, 100, 0.7);
	}

	* {
		scrollbar-width: unset;
		scrollbar-color: unset;
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		background-color: #222;
		color: white;
	}
}