/* =============================================
   Theme Color Variables
   ============================================= */
html,
body #loading-container,
body:not(.graphiql-light).graphiql-li #graphiql .graphiql-container {
	--color-primary: 358, 74%, 55%;
	--color-secondary: 220, 44%, 60%;
	--color-tertiary: 180, 100%, 75%;
	--color-info: 208, 100%, 75%;
	--color-success: 142, 100%, 65%;
	--color-warning: 42, 100%, 75%;
	--color-error: 10, 100%, 70%;
}

body.graphiql-light #graphiql .graphiql-container {
	--color-primary: 358, 74%, 35%;
	--color-secondary: 220, 44%, 43%;
	--color-tertiary: 180, 100%, 25%;
	--color-info: 208, 90%, 35%;
	--color-success: 142, 80%, 30%;
	--color-warning: 42, 90%, 35%;
	--color-error: 10, 80%, 40%;
}

/* Light theme overrides */
body.graphiql-light #loading-container,
body.graphiql-light #graphiql .graphiql-container {
	--color-neutral: 219, 28%, 32%;
	--color-base: 0, 0%, 88%;
}

/* Dark theme overrides */
body:not(.graphiql-light) #loading-container,
body:not(.graphiql-light) #graphiql .graphiql-container {
	--color-neutral: 0, 9%, 78%;
	--color-base: 220, 15%, 13%;
}

.graphiql-container,
.graphiql-container .graphiql-sessions {
	position: relative;
	isolation: isolate;
}
.graphiql-container::before,
.graphiql-container .graphiql-sessions::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: -1;
}

body:not(.graphiql-light) .graphiql-container::before {
	background-color: hsla(var(--color-primary), 0.1);
}
body.graphiql-light .graphiql-container::before {
	background-color: hsla(var(--color-primary), 0.2);
}

body:not(.graphiql-light) .graphiql-container .graphiql-sessions::before {
	background-color: hsla(var(--color-primary), 0.025);
}
body.graphiql-light .graphiql-container .graphiql-sessions::before {
	background-color: hsla(var(--color-primary), 0.1);
}

body:not(.graphiql-light) .graphiql-container .graphiql-editors,
body:not(.graphiql-light) .graphiql-tab.graphiql-tab-active,
body:not(.graphiql-light) .graphiql-editor-tools button.active {
	background-color: hsla(0, 0%, 0%, 0.35);
}
body.graphiql-light .graphiql-container .graphiql-editors,
body.graphiql-light .graphiql-tab.graphiql-tab-active,
body.graphiql-light .graphiql-editor-tools button.active {
	background-color: hsla(0, 0%, 100%, 0.35);
}

/* =============================================
   Custom Scrollbar
   ============================================= */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
	border-radius: unset;
}

::-webkit-scrollbar-thumb {
	border-radius: 100vw;
	background: hsl(var(--color-neutral));
}

/* =============================================
   Base Layout
   ============================================= */
body {
	height: 100%;
	margin: 0;
	width: 100%;
	overflow: hidden;
}

#graphiql {
	height: 100vh;
	width: 100%;
	position: absolute;
	top: 0;
}