html {
	height: 100%;
	font-size: 62.5%;
	box-sizing: border-box;
}

body {
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-family);
	height: 100%;
	line-height: 1.4;
	font-size: 100% !important;

	&.vscode-light {
		background-color: var(--color-background--darken-075);
	}
}

// canvas.snow {
// 	max-width: calc(100% - 20px);
// 	pointer-events: none;
// 	position: fixed;
// 	z-index: 2147483646;
// }

// .snow__trigger {
// 	cursor: pointer;
// 	position: fixed;
// 	right: 10px;
// 	top: 5px;
// 	transform: rotate(-20deg);
// 	width: 22px;
// 	z-index: 2147483647;

// 	& svg:hover {
// 		& path:first-child {
// 			fill: #f30000;
// 		}
// 	}
// }

a {
	border: 0;
	color: var(--color-link-foreground);
	font-weight: 400;
	outline: none;
	text-decoration: none;

	&:not([href]):not([tabindex]):focus,
	&:not([href]):not([tabindex]):hover {
		color: inherit;
		text-decoration: none;
	}

	&:focus {
		outline-color: var(--color-focus-border);
	}
}

b {
	font-weight: 600;
}

code,
.shortcut-key {
	border-radius: 4px;
	color: var(--color-foreground);
	padding: 2px 6px 0 6px;
	vertical-align: baseline;

	.vscode-dark & {
		background-color: var(--color-background--lighten-15);
		border-bottom: 2px solid var(--color-background--lighten-15);
	}

	.vscode-light & {
		background-color: var(--color-background--darken-15);
		border-bottom: 2px solid var(--color-background--darken-15);
	}
}

h1 {
	border: none;
	font-size: 4rem;
	font-weight: 400;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

h2 {
	font-size: 2.2rem;
	font-weight: 200;
	line-height: normal;
	margin: 1em 0 0.3em 0;
	white-space: nowrap;
}

h3 {
	font-size: 1.8rem;
	font-weight: 200;
	line-height: normal;
	margin: 1em 0 0.3em 0;
	white-space: nowrap;
}

h4 {
	font-size: 1rem;
	font-weight: 200;
	line-height: normal;
	margin: 1em 0 0.3em 0;
	white-space: nowrap;
}

header {
	grid-area: header;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
	grid-gap: 1em 3em;
	align-items: center;
	justify-items: center;
	margin: 0 3em;
}

input,
select,
button {
	font-family: var(--font-family);
	font-size: inherit;
	margin: 0;
}

input[type='checkbox'] {
	background: none;
	border: none;
	cursor: pointer;
	margin: 0;
	padding: 0 10px;

	&:focus {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		outline: none;
	}

	&[disabled] {
		color: var(--color-foreground--75);
		cursor: default;
	}
}

input[type='text'],
input:not([type]) {
	background: none;
	color: var(--color-foreground);
	margin: 0 10px;
	max-width: 300px;
	padding: 4px;
	width: 100%;

	.vscode-dark & {
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.vscode-light & {
		border: 1px solid rgba(0, 0, 0, 0.3);
	}

	&:focus {
		outline-color: var(--color-focus-border);

		.vscode-light & {
			background-color: rgba(255, 255, 255, 0.4);
		}

		.vscode-dark & {
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	&[disabled] {
		color: var(--color-foreground--75);
		cursor: default;
	}

	&::placeholder {
		color: var(--vscode-input-placeholderForeground);
	}
}

label {
	cursor: pointer;
}

select {
	background: none;
	color: var(--color-foreground);
	cursor: pointer;
	margin: 0 0.75em;
	padding: 2px;
	min-width: 5em;

	.vscode-light & {
		border: 1px solid rgba(0, 0, 0, 0.3);
	}

	.vscode-dark & {
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	&:focus {
		outline-color: var(--color-focus-border);
		.vscode-light & {
			background-color: rgba(255, 255, 255, 0.4);
		}

		.vscode-dark & {
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	&[disabled] {
		color: var(--color-foreground--75);
		cursor: default;
	}
}

select option {
	.vscode-light & {
		background-color: var(--color-background--darken-05);
	}

	.vscode-dark & {
		background-color: var(--color-background--lighten-05);
	}

	&:focus {
		outline-color: var(--color-focus-border);
		.vscode-light & {
			background-color: rgba(255, 255, 255, 0.4);
		}

		.vscode-dark & {
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.button {
	background: none;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block;
	font-size: 1.1rem;
	letter-spacing: 0.25em;
	margin: 1em 0.5em;
	padding: 1em 1.75em;
	text-decoration: none;
	text-transform: uppercase;
	user-select: none;
	white-space: nowrap;

	&:focus {
		outline: none;
	}
}

.button--big {
	font-size: 1.5rem;
}

.button--flat {
	.vscode-light & {
		border: 1px solid rgba(0, 0, 0, 0.6);
		color: black;
	}
	.vscode-dark & {
		border: 1px solid rgba(255, 255, 255, 0.6);
		color: white !important;
	}
	transition: background-color 250ms, border-color 250ms, color 250ms;

	&:hover {
		.vscode-light & {
			background-color: var(--color-button-background--darken-30);
			border-color: var(--color-button-background--darken-30);
			color: white !important;
		}
		.vscode-dark & {
			background-color: white;
			border-color: white;
			color: black !important;
		}
	}

	.preload & {
		transition-duration: 0s !important;
	}
}

.button--flat-inverse {
	background-color: white;
	border: 1px solid white;
	color: black !important;
	font-weight: 600;
	transition: background-color 250ms, border-color 250ms, color 250ms;

	&:hover {
		background: rgba(0, 0, 0, 0.2);
		border-color: rgba(255, 255, 255, 0.6);
		color: white !important;
	}

	.preload & {
		transition-duration: 0s !important;
	}
}

.button--flat-primary {
	background-color: var(--color-button-background);
	border: 1px solid var(--color-button-background);
	color: var(--color-button-foreground) !important;
	font-weight: 600;
	transition: background-color 250ms, border-color 250ms, color 250ms;

	&:hover {
		.vscode-dark & {
			background-color: white;
			border-color: white;
			color: black !important;
		}

		.vscode-light & {
			background-color: var(--color-button-background--darken-30);
			border-color: var(--color-button-background--darken-30);
			color: white !important;
		}
	}

	.preload & {
		transition-duration: 0s !important;
	}
}

.blurb {
	font-size: 1.5rem;
	font-weight: 200;
	color: var(--color-foreground--65);
	margin: 1em;

	b {
		color: var(--color-foreground--85);
	}

	.vscode-light & {
		color: var(--color-foreground--75);
	}
}

.command {
	font-weight: 600;
	padding: 1px 3px;
}

.container {
	display: grid;
	grid-template-areas: 'header header' 'hero hero' 'content sidebar';
	grid-template-columns: repeat(1, 1fr min-content);
	margin: 1em auto;
	grid-gap: 1em 3em;
	max-width: 1200px;
	min-width: 450px;

	@media all and (max-width: 768px) {
		grid-gap: 1em 0;
	}
}

.content__area {
	grid-area: content;
	font-size: 1.4rem;

	.vscode-dark & {
		background-color: var(--color-background--lighten-05);
	}

	.vscode-light & {
		background-color: var(--color-background);
	}

	@media all and (max-width: 768px) {
		grid-column: span 1;
	}
}

.content__area--full-scroll {
	background-color: unset !important;
	margin-bottom: 90vh;

	.section--settings {
		margin: 0 0 1em 0;
	}
}

.cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.3rem;
	margin: 0;

	& p {
		margin-left: 10%;
		margin-right: 10%;
		margin-top: -0.5em;
		opacity: 0.6;
	}
}

.cta--primary {
	margin: 0 1em;
}

.cta--secondary {
	margin: 0 1em;
}

.header__blurb {
	color: var(--color-foreground--75);
	flex: 2 1 55%;
	font-size: 1.5rem;
	font-weight: 200;
	margin: 0;
	min-width: 345px;

	@media all and (max-width: 880px) {
		margin: 0 2em;
	}
}

.header__link {
	color: var(--color-foreground);
	outline: none;

	&:hover,
	&:active,
	&:focus {
		color: var(--color-foreground);
		outline: none;
	}
}

.header__logo {
	display: flex;
	flex-wrap: nowrap;
}

.header__logo--highlight {
	color: #914db3;
}

.header__subtitle {
	color: var(--color-foreground--65);
	font-size: 2rem;
	font-weight: 100;
	margin: -0.2em 0 0 0;
	white-space: nowrap;
}

.hero__area {
	grid-area: hero;
	color: var(--color-foreground--75);
	font-size: 1.5rem;
	font-weight: 200;
	margin: 0 1em;

	b {
		color: var(--color-foreground--85);
	}
}

.hero__area--sticky {
	background: var(--color-background);
	margin: 0;
	padding: 1em 0;
	position: sticky;
	top: -1px;
	z-index: 1;
	grid-column: span 1;

	.vscode-light & {
		background: var(--color-background--darken-075);
	}
}

.hero__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: space-between;
}

.hero__subtitle {
	color: var(--color-foreground--75);
	font-size: 1.4rem;
	margin: 0.25em 0 0 0;
}

.hero__title {
	font-size: 4rem;
	margin: 0;
}

.hero__title-actions {
	margin: 0 1em;
}

.hero__toolbar {
	flex: 1 1 auto;

	display: flex;
	justify-content: flex-end;
	white-space: nowrap;

	select,
	option {
		background-color: var(--color-background) !important;
		margin-right: 0;

		@media all and (max-width: 768px) {
			margin-right: unset;
		}
	}
}

.hero__toolbar-scope {
	flex: 0 0 auto;
}

.icon {
	background-color: var(--color-foreground);
	display: inline-block;
	height: 24px;
	margin-right: 3px;
	position: relative;
	width: 19px;
	top: 9px;

	h2 & {
		top: 7px;
	}
}

.icon__bulb {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.67 8.658c-.338.334-.598.705-.781 1.114-.178.407-.268.85-.268 1.329v1.6a1.304 1.304 0 0 1-.794 1.197c-.159.068-.329.102-.509.102H7.712a1.285 1.285 0 0 1-.922-.379 1.303 1.303 0 0 1-.38-.92v-1.6c0-.479-.092-.921-.274-1.329a3.556 3.556 0 0 0-.776-1.114 4.689 4.689 0 0 1-1.006-1.437A4.187 4.187 0 0 1 4 5.5a4.432 4.432 0 0 1 .616-2.27c.197-.336.432-.64.705-.914.274-.272.578-.506.911-.702.338-.196.7-.348 1.084-.454C7.7 1.053 8.1 1 8.516 1a4.476 4.476 0 0 1 2.276.614 4.475 4.475 0 0 1 1.622 1.616 4.438 4.438 0 0 1 .616 2.27c0 .617-.117 1.191-.353 1.721a4.69 4.69 0 0 1-1.006 1.437zM9.623 10.5H7.409v2.201c0 .081.028.15.09.212.062.061.131.09.213.09h1.606a.289.289 0 0 0 .213-.09.286.286 0 0 0 .09-.212V10.5z" clip-rule="evenodd"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.67 8.658c-.338.334-.598.705-.781 1.114-.178.407-.268.85-.268 1.329v1.6a1.304 1.304 0 0 1-.794 1.197c-.159.068-.329.102-.509.102H7.712a1.285 1.285 0 0 1-.922-.379 1.303 1.303 0 0 1-.38-.92v-1.6c0-.479-.092-.921-.274-1.329a3.556 3.556 0 0 0-.776-1.114 4.689 4.689 0 0 1-1.006-1.437A4.187 4.187 0 0 1 4 5.5a4.432 4.432 0 0 1 .616-2.27c.197-.336.432-.64.705-.914.274-.272.578-.506.911-.702.338-.196.7-.348 1.084-.454C7.7 1.053 8.1 1 8.516 1a4.476 4.476 0 0 1 2.276.614 4.475 4.475 0 0 1 1.622 1.616 4.438 4.438 0 0 1 .616 2.27c0 .617-.117 1.191-.353 1.721a4.69 4.69 0 0 1-1.006 1.437zM9.623 10.5H7.409v2.201c0 .081.028.15.09.212.062.061.131.09.213.09h1.606a.289.289 0 0 0 .213-.09.286.286 0 0 0 .09-.212V10.5z" clip-rule="evenodd"/></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	opacity: 0.8;
}

.icon__chevron-down {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.97602 10.0719L12.3333 5.7146L12.952 6.33332L8.28538 11L7.66666 11L3 6.33332L3.61872 5.7146L7.97602 10.0719Z" /></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.97602 10.0719L12.3333 5.7146L12.952 6.33332L8.28538 11L7.66666 11L3 6.33332L3.61872 5.7146L7.97602 10.0719Z" /></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.icon__gear {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.1 4.4L8.6 2H7.4l-.5 2.4-.7.3-2-1.3-.9.8 1.3 2-.2.7-2.4.5v1.2l2.4.5.3.8-1.3 2 .8.8 2-1.3.8.3.4 2.3h1.2l.5-2.4.8-.3 2 1.3.8-.8-1.3-2 .3-.8 2.3-.4V7.4l-2.4-.5-.3-.8 1.3-2-.8-.8-2 1.3-.7-.2zM9.4 1l.5 2.4L12 2.1l2 2-1.4 2.1 2.4.4v2.8l-2.4.5L14 12l-2 2-2.1-1.4-.5 2.4H6.6l-.5-2.4L4 13.9l-2-2 1.4-2.1L1 9.4V6.6l2.4-.5L2.1 4l2-2 2.1 1.4.4-2.4h2.8zm.6 7c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM8 9c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.1 4.4L8.6 2H7.4l-.5 2.4-.7.3-2-1.3-.9.8 1.3 2-.2.7-2.4.5v1.2l2.4.5.3.8-1.3 2 .8.8 2-1.3.8.3.4 2.3h1.2l.5-2.4.8-.3 2 1.3.8-.8-1.3-2 .3-.8 2.3-.4V7.4l-2.4-.5-.3-.8 1.3-2-.8-.8-2 1.3-.7-.2zM9.4 1l.5 2.4L12 2.1l2 2-1.4 2.1 2.4.4v2.8l-2.4.5L14 12l-2 2-2.1-1.4-.5 2.4H6.6l-.5-2.4L4 13.9l-2-2 1.4-2.1L1 9.4V6.6l2.4-.5L2.1 4l2-2 2.1 1.4.4-2.4h2.8zm.6 7c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM8 9c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z"/></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.icon__info {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.568 1.031A6.8 6.8 0 0 1 12.76 3.05a7.06 7.06 0 0 1 .46 9.39 6.85 6.85 0 0 1-8.58 1.74 7 7 0 0 1-3.12-3.5 7.12 7.12 0 0 1-.23-4.71 7 7 0 0 1 2.77-3.79 6.8 6.8 0 0 1 4.508-1.149zM9.04 13.88a5.89 5.89 0 0 0 3.41-2.07 6.07 6.07 0 0 0-.4-8.06 5.82 5.82 0 0 0-7.43-.74 6.06 6.06 0 0 0 .5 10.29 5.81 5.81 0 0 0 3.92.58zM8.51 7h-1v4h1V7zm0-2h-1v1h1V5z" clip-rule="evenodd"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.568 1.031A6.8 6.8 0 0 1 12.76 3.05a7.06 7.06 0 0 1 .46 9.39 6.85 6.85 0 0 1-8.58 1.74 7 7 0 0 1-3.12-3.5 7.12 7.12 0 0 1-.23-4.71 7 7 0 0 1 2.77-3.79 6.8 6.8 0 0 1 4.508-1.149zM9.04 13.88a5.89 5.89 0 0 0 3.41-2.07 6.07 6.07 0 0 0-.4-8.06 5.82 5.82 0 0 0-7.43-.74 6.06 6.06 0 0 0 .5 10.29 5.81 5.81 0 0 0 3.92.58zM8.51 7h-1v4h1V7zm0-2h-1v1h1V5z" clip-rule="evenodd"/></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.icon--md {
	height: 30px;
	width: 24px;
	top: 12px;
}

.icon--lg {
	height: 36px;
	width: 30px;
	top: 15px;
}

.image__logo {
	margin: 9px 1em 0 0;
	max-height: 64px;
	max-width: 64px;
}

.image__preview {
	border-radius: 8px;
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8), 0px 0px 12px 1px rgba(0, 0, 0, 0.5);
	width: 600px;
}

.image__preview--overlay {
	left: 0;
	position: absolute;
	top: 0;
}

.link__configure,
.link__learn-more {
	margin-left: 10px;
}

.presets {
	align-items: baseline;
	justify-content: center;
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

section {
	display: flex;
	flex-wrap: wrap;

	margin-bottom: 1em;
	padding: 1em;

	h2 {
		flex: 1 0 auto;

		display: flex;
		margin-top: 0;
		margin-bottom: 1em;
	}
}

.section--full {
	flex-flow: column;
}

.section--settings {
	flex: 0 1 auto;

	display: flex;
	flex-wrap: wrap;

	border-radius: 6px;
	margin: 1em;
	padding: 1em;

	.vscode-dark & {
		background: var(--color-background--lighten-075);
	}

	.vscode-light & {
		background: var(--color-background--darken-05);
	}
}

.section--collapsible {
	.vscode-light & {
		background: var(--color-background);
	}

	.section__header {
		cursor: pointer;
		flex: 1 0 100%;
		margin-right: 0;

		&:after {
			background-color: var(--color-foreground--75);
			content: '';
			height: 40px;
			-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 62a3 3 0 0 1-2-1L26 44a3 3 0 0 1 3-5l21 16 21-16a3 3 0 1 1 3 5L52 61a3 3 0 0 1-2 1z"/></svg>');
			mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 62a3 3 0 0 1-2-1L26 44a3 3 0 0 1 3-5l21 16 21-16a3 3 0 1 1 3 5L52 61a3 3 0 0 1-2 1z"/></svg>');
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-size: 32px 40px;
			mask-size: 32px 40px;
			position: absolute;
			right: 0;
			top: 0;
			transition: transform 250ms ease-in-out;
			width: 32px;
		}
	}

	&.collapsed {
		.section__header {
			margin-bottom: 0;

			&:after {
				transform: translateY(-9px) rotate(-180deg);
			}

			h2 {
				margin-bottom: 0;
			}
		}

		.section__collapsible {
			display: none;
		}
	}
}

.section__collapsible {
	display: flex;
	flex-wrap: wrap;
}

.section__content {
	flex: 1 1 auto;

	display: flex;
	flex-flow: column wrap;
}

.section__group {
	flex: 1 0 100%;

	display: flex;
	flex-flow: wrap-reverse;

	& + .section__group {
		margin-top: 1em;
	}
}

.section__header {
	display: flex;
	align-items: baseline;
	flex: 0 1 auto;
	flex-flow: column;
	margin-bottom: 1em;
	margin-right: 1em;
	position: relative;

	h2 {
		margin-bottom: 0;
	}

	.link__configure,
	.link__learn-more {
		visibility: hidden;
	}

	&:hover {
		.link__configure,
		.link__learn-more {
			visibility: visible;
		}
	}
}

.section__header-hint {
	color: var(--color-foreground--75);
	font-weight: 200;
	margin: 0.25em 0;
}

.section__header-info {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1em;
	align-items: center;

	color: var(--color-foreground--75);
	font-weight: 200;
	margin: 0.25em 0.5em;

	p {
		margin: 0;
		line-height: 2rem;
	}

	.icon {
		top: 3px;
	}
}

.section__hint {
	flex: 0 0 auto;

	color: var(--color-foreground--75);
	font-weight: 200;
	margin: 0;
}

.section__preview {
	flex: 0 1 auto;
	position: relative;
	margin-left: auto;
	margin-right: auto;

	.section__collapsible & {
		margin-bottom: 1em;
	}
}

.section__preview-hint {
	color: var(--color-foreground--75);
	font-weight: 200;
	margin: 0.5em 0.5em 0 0.5em;
	text-align: center;
}

// .section__preview-spacer {
// 	flex-grow: 10;
// 	flex-shrink: 10;
// }

.section__title {
	flex: 1 0 auto;
	margin: 0;
}

.section__title--primary {
	font-size: 3rem;
	margin: 0.3em 0;
	justify-content: center;
}

.section__title--break {
	margin: 0.3em 15% 0 15%;
	padding-top: 1em;
	justify-content: center;

	.vscode-dark & {
		border-top: 1px solid var(--color-background--lighten-30);
	}

	.vscode-light & {
		border-top: 1px solid var(--color-background--darken-30);
	}
}

.setting {
	flex: 0 1 auto;
	position: relative;
	margin-right: 1em;

	& input[type='checkbox'] {
		flex: 0 0 16px;
		height: 16px;
		margin: 0 10px 0 0;
		position: relative;
		top: 3px;
		width: 16px;
	}

	&[disabled] {
		label {
			color: var(--color-foreground--75);
			cursor: default;
		}
	}
}

.setting--expandable {
	.setting__expander {
		background-color: var(--color-foreground--75);
		cursor: pointer;
		height: 16px;
		-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 62a3 3 0 0 1-2-1L26 44a3 3 0 0 1 3-5l21 16 21-16a3 3 0 1 1 3 5L52 61a3 3 0 0 1-2 1z"/></svg>');
		mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 62a3 3 0 0 1-2-1L26 44a3 3 0 0 1 3-5l21 16 21-16a3 3 0 1 1 3 5L52 61a3 3 0 0 1-2 1z"/></svg>');
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 32px 28px;
		mask-size: 32px 28px;
		position: relative;
		margin: 0;
		transform: translate(-9px, 4px) rotate(-90deg);
		transition: transform 250ms ease-in-out;
		width: 32px;
	}

	& + .settings {
		display: none;
	}

	&.expanded {
		.setting__expander {
			transform: translate(-4px, 0);
		}

		& + .settings {
			display: unset;
		}
	}
}

.setting__input {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	line-height: normal;
	margin: 0.5em 0;

	input,
	select {
		flex-grow: 1;

		& + .link__configure,
		& + .link__learn-more {
			margin-left: 0;
		}
	}

	input[type='text'],
	input:not([type]) {
		min-width: 245px;
	}

	label {
		flex-grow: 0;

		> select {
			margin-top: 0.25em;
		}
	}

	.link__learn-more,
	.link__configure {
		visibility: hidden;
		max-height: 15px;

		.icon {
			display: block;
			top: unset;
		}
	}

	&:hover {
		.link__learn-more,
		.link__configure {
			visibility: visible;
		}
	}
}

.setting__input--big {
	font-size: 2.2rem;
	font-weight: 200;
	margin: 0;

	& input[type='checkbox'] {
		flex: 0 0 1.5em;
		height: 1em;
		margin: 0;
		position: relative;
		top: 3px;
		left: -5px;
		width: 1em;
	}

	& label {
		white-space: nowrap;
	}

	.link__learn-more,
	.link__configure {
		max-height: 17px;
	}
}

.setting__input--format {
	display: flex;

	input[type='text'],
	input:not([type]) {
		max-width: unset;
	}
}

.setting__hint {
	color: var(--color-foreground--75);
	display: block;
	font-weight: 200;
	font-size: 1.3rem;
	margin: 0 1em 0.5em 1em;
}

.settings {
	flex: 1 0 auto;

	display: flex;
	flex-wrap: wrap;
	// align-items: baseline;
	// justify-content: space-between;

	.setting {
		margin-right: 3em;
	}
}

.settings--fixed {
	display: block;
}

.sidebar {
	grid-area: sidebar;
	align-self: flex-start;
	font-size: 1.3rem;
	position: sticky;
	top: 0;
	z-index: 2;

	@media all and (max-width: 768px) {
		display: none;
	}

	li {
		white-space: nowrap;
	}

	.button {
		margin: 0;
	}
}

.sidebar__group {
	margin-top: 1em;

	h2 {
		font-size: 2rem;
	}

	p {
		font-weight: 400;
		opacity: 0.5;
		text-align: center;
	}
}

.sidebar__jump-link {
	&.active {
		font-weight: 700;

		&:before {
			content: ' ';
			border-left: 4px solid var(--color-link-foreground--darken-20);
			position: absolute;
			left: -1em;
			height: 1em;
			padding-bottom: 4px;

			.vscode-light & {
				border-left-color: var(--color-link-foreground--lighten-20);
			}
		}
	}
}

.sponsor__image {
	opacity: 0.8;
	transition: opacity 250ms;
	transform: scale(0.6);
	margin: -2.5em 0;

	&:hover {
		opacity: 1;
	}
}

.sponsor__tag {
	font-size: 1.1rem;
	margin: -1em 0.5em 0 0.5em;
	opacity: 0.5;
	text-align: center;
}

.bold {
	font-weight: 600;
}

.center {
	text-align: center;
}

.hidden {
	display: none !important;
}

.highlight {
	background-color: #914db3;
	border-bottom: 2px solid #914db3;
	border-radius: 3px;
	color: #f2f2f2;
	margin: 0 0.25em;
	padding: 2px 10px;
	text-align: center;
	vertical-align: bottom;
}

.is-sidebar-hidden {
	display: none;

	@media all and (max-width: 768px) {
		display: initial;
	}
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-05 {
	margin-bottom: 0.5em !important;
}

.mb-1 {
	margin-bottom: 1em !important;
}

.mb-2 {
	margin-bottom: 2em !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ml-1 {
	margin-left: 1em !important;
}

.ml-2 {
	margin-left: 2em !important;
}

.ml-3 {
	margin-left: 3em !important;
}

.ml-4 {
	margin-left: 4em !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mr-1 {
	margin-right: 1em !important;
}

.mr-2 {
	margin-right: 2em !important;
}

.mt-n1 {
	margin-top: -1em !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-05 {
	margin-top: 0.5em !important;
}

.mt-1 {
	margin-top: 1em !important;
}

.mt-2 {
	margin-top: 2em !important;
}

.non-interactive {
	cursor: default !important;
}

.nowrap {
	white-space: nowrap !important;
}

.light {
	.vscode-dark & {
		display: none;
	}
}

.dark {
	.vscode-light & {
		display: none;
	}
}

::-webkit-scrollbar-corner {
	background-color: transparent !important;
}

@import 'popup';
