* {
	font-family: var(--global-code-font) !important;
}

.webgpu-canvas { aspect-ratio: 16 / 9; outline: none }
.webgpu-canvas:fullscreen { width: 100%; height: 100%; }
.webgpu-canvas:-webkit-full-screen { width: 100%; height: 100%; }
.webgpu-canvas:-moz-full-screen { width: 100%; height: 100%; }
.webgpu-canvas:-ms-fullscreen { width: 100%; height: 100%; }

.code-border-success { border: 1px solid var(--global-color-success) }
.code-border-default { border: 1px solid transparent }
.code-border-error { border: 1px solid var(--global-color-error) }

.notifications ol .lextoast .lextoastcontent .desc {
	transition: all 0.5s cubic-bezier(.42, .97, .52, 1.19);
}

.notifications ol.list .lextoast .lextoastcontent .desc {
	word-wrap: break-word;
	white-space: normal;
}

.lextextarea {
	height: inherit;
}

.lexmenubar {
	background-color: var(--global-blur-background);
}

.lexcomponent input.lextext, .lexcomponent div.lextext {
    padding: var(--global-padding-sm) 0.75rem;
}

.lexareatabs.row {
	background: none !important;
}

.lexareatabs.row .lexareatab {
	border-top-left-radius: 8px !important;
	border-top-right-radius: 8px !important;
	border: none !important;
	padding: var(--global-padding-md) 1.25em;
}

.lexareatabs.row .lexareatab.selected {
	border: none !important;
	background-color: light-dark(var(--global-color-secondary), var(--global-medium-background)) !important;
}

.lexcodearea {
	border-top-right-radius: 8px !important;
	overflow: hidden;
}

.codebasearea {
	transition: border 0.15s ease-out;
}

.custom-parameters-panel .lexnumber input {
	field-sizing: content;
}

.channel-title {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.shader-list-initial {
	grid-template-columns:repeat(2, 1fr);
}

.shader-item {
    grid-column-end: span 1;
    grid-row-end: span 1;
}

.shader-item.featured {
    grid-column-end: span 2;
}

.lexskeleton .shader-item {
	aspect-ratio: 16 / 10;
}

.channel-server-list {
	grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
	grid-auto-rows: minmax(175px, auto);
}

.channel-server-list li {
	aspect-ratio: 1 / 1;
}

.channel-list {
	grid-template-columns:repeat(4, 1fr);
}

.help-content {
	margin-left: auto;
    margin-right: auto;
    max-width: 1400px;

	/* https://pqina.nl/blog/fade-out-overflow-using-css-mask-image/ */
    --scrollbar-width: 8px;
    --mask-height: 64px;
	padding-bottom: var(--mask-height);
    --mask-image-content: linear-gradient(to bottom, black calc(100% - var(--mask-height)), transparent);
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;
    --mask-image-scrollbar: linear-gradient(black, black);
    --mask-size-scrollbar: var(--scrollbar-width) 100%;
    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
    mask-position: 0 0, 100% 0;
    mask-repeat: no-repeat, no-repeat;
}

.help-content p, .help-content li {
	color: var(--global-text-secondary);
}

.hub-background {
	background-image: url("images/background.png");
	background-size: cover;
}

.hub-background-blur {
	background: transparent;
	--webkit-backdrop-filter: blur(128px) grayscale(0.5);
    backdrop-filter: blur(128px) grayscale(0.5);
}

@media (min-width: 0px) {
	.shader-list {
		grid-template-columns:repeat(1, 1fr);
	}
}

@media (min-width: 785px) {
	.shader-list {
		grid-template-columns:repeat(2, 1fr);
	}
}

@media (min-width: 1180px) {
	.shader-list {
		grid-template-columns:repeat(3, 1fr);
	}
}

@media (min-width: 1560px) {
	.shader-list {
		grid-template-columns:repeat(4, 1fr);
	}
}

@media screen and (max-width: 992px) {

	#lexroot {
		bottom: unset;
	}

	body {
		overflow-y: auto;
	}

    .content-area {
		flex-direction: column;
	}

	.content-area > * {
		width: 100% !important;
	}

	:root, :root body {
    	overflow-y: auto;
	}

	.shader-edit-content {
		display: none;
	}

	.shader-list-initial .shader-item {
		grid-column-end: span 2;
	}

	.lexdialog {
		width: 90% !important;
	}
}