@import "../_variables";
@import "../_mixins";
@import "../_global";
@import "../_grid";
@import "../_pre";
@import "../_overrides";
@import "_code";
@import "_diagnostics";
@import "_results";
@import "_tabs";
@import "_settings";

html,
body {
	width: 100%;
	height: 100%;
}
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}

#root {
	display: flex;
	width: 100%;
	height: calc(100vh - 65px); /* header size + border */
}

body {
	display: flex;
	flex-direction: column;
	overscroll-behavior-y: none;
	height: 100vh;
	width: 100%;

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}

	#root {
		display: flex;
	}
}

.docs-sidebar {
	display: none;

	&.mobile-active {
		display: block;
	}
}

h2 {
	padding: 10px;
	display: flex;
	line-height: 18px;
	font-size: 14px;
	font-weight: 500;
	box-shadow:
		inset 0 1px 0 var(--sl-border),
		inset 0 -1px 0 var(--sl-border);
	background-color: var(--sl-color-gray-6);

	:root[data-theme="dark"] & {
		background-color: var(--sl-color-gray-5);
	}

	&.biome {
		background-color: rgb(96 165 250 / 20%) !important;
	}

	&.prettier {
		background-color: rgb(53 95 117 / 40%) !important;
	}

	img {
		vertical-align: middle;
		height: 18px;
		width: 18px;
		margin-right: 10px;
		object-fit: contain;
	}

	&.collapsible {
		cursor: pointer;

		&:hover {
			opacity: 0.9;
		}

		&.collapsed {
			opacity: 0.8;
		}
	}
}

.code-pane,
.results-pane {
	width: 100%;
	min-width: 0;
}

input[type="checkbox"] {
	accent-color: var(--sl-color-text-accent);
}
