@lvce-editor/server 0.38.9 → 0.40.0

package/static/f3cf31a/css/App.css

@@ -1,2872 +0,0 @@
-/*! modern-normalize v3.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-
-/*
-Document
-========
-*/
-
-/**
-Use a better box model (opinionated).
-*/
-
-*,
-::before,
-::after {
-	box-sizing: border-box;
-}
-
-html {
-	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
-	font-family:
-		system-ui,
-		'Segoe UI',
-		Roboto,
-		Helvetica,
-		Arial,
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji';
-	line-height: 1.15; /* 1. Correct the line height in all browsers. */
-	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
-	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
-}
-
-/*
-Sections
-========
-*/
-
-body {
-	margin: 0; /* Remove the margin in all browsers. */
-}
-
-/*
-Text-level semantics
-====================
-*/
-
-/**
-Add the correct font weight in Chrome and Safari.
-*/
-
-b,
-strong {
-	font-weight: bolder;
-}
-
-/**
-1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-2. Correct the odd 'em' font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-	font-family:
-		ui-monospace,
-		SFMono-Regular,
-		Consolas,
-		'Liberation Mono',
-		Menlo,
-		monospace; /* 1 */
-	font-size: 1em; /* 2 */
-}
-
-/**
-Add the correct font size in all browsers.
-*/
-
-small {
-	font-size: 80%;
-}
-
-/**
-Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-	font-size: 75%;
-	line-height: 0;
-	position: relative;
-	vertical-align: baseline;
-}
-
-sub {
-	bottom: -0.25em;
-}
-
-sup {
-	top: -0.5em;
-}
-
-/*
-Tabular data
-============
-*/
-
-/**
-Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
-
-table {
-	border-color: currentcolor;
-}
-
-/*
-Forms
-=====
-*/
-
-/**
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-	font-family: inherit; /* 1 */
-	font-size: 100%; /* 1 */
-	line-height: 1.15; /* 1 */
-	margin: 0; /* 2 */
-}
-
-/**
-Correct the inability to style clickable types in iOS and Safari.
-*/
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-	-webkit-appearance: button;
-}
-
-/**
-Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
-*/
-
-legend {
-	padding: 0;
-}
-
-/**
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-	vertical-align: baseline;
-}
-
-/**
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-	height: auto;
-}
-
-/**
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-	-webkit-appearance: textfield; /* 1 */
-	outline-offset: -2px; /* 2 */
-}
-
-/**
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-	-webkit-appearance: none;
-}
-
-/**
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to 'inherit' in Safari.
-*/
-
-::-webkit-file-upload-button {
-	-webkit-appearance: button; /* 1 */
-	font: inherit; /* 2 */
-}
-
-/*
-Interactive
-===========
-*/
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-	display: list-item;
-}
-
-body {
-  margin: 0;
-}
-.Terminal {
-  position: relative;
-  contain: strict;
-  width: 780px;
-  height: 625px;
-  background: black;
-}
-
-.TerminalLayers {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.TerminalCanvasText,
-.TerminalCanvasCursor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.TerminalCanvasCursor {
-  opacity: 0.5;
-}
-
-.TerminalTextArea {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-}
-
-/*************/
-/* _Global.css */
-/*************/
-@font-face {
-  font-family: 'Fira Code';
-  src: url(/f3cf31a/fonts/FiraCode-VariableFont.ttf) format('truetype');
-}
-
-/* TODO check if contain strict also makes sense for html and body */
-
-html,
-body {
-  height: 100%;
-  contain: strict;
-}
-
-body {
-  font-family:
-    system-ui,
-    Ubuntu,
-    Droid Sans,
-    sans-serif;
-  user-select: none;
-  color: var(--WorkbenchForeground);
-}
-/*************/
-/* Actions.css */
-/*************/
-.Actions {
-  display: flex;
-  margin-left: auto;
-  align-items: center;
-  contain: content;
-}
-
-.SelectWrapper {
-  contain: content;
-  position: relative;
-  height: 21px;
-}
-
-.SelectIcon {
-  position: absolute;
-  inset: 0 6px 0 auto;
-  background: currentColor;
-  mask-repeat: no-repeat;
-  mask-size: var(--MaskIconSize);
-  mask-position: 50% 50%;
-  mask-image: url(/f3cf31a/icons/chevron-down.svg);
-  pointer-events: none;
-  width: 16px;
-  height: 16px;
-  contain: strict;
-  margin: auto 0;
-}
-/*************/
-/* ActivityBarItem.css */
-/*************/
-.ActivityBarItem {
-  position: relative;
-  outline: none;
-  width: 48px;
-  height: 48px;
-  contain: strict;
-  flex-shrink: 0;
-  --MaskIconSize: 24px;
-  mask-repeat: no-repeat;
-  mask-size: var(--MaskIconSize);
-  mask-position: 50% 50%;
-  background: currentColor;
-  cursor: pointer;
-}
-
-.ActivityBarItem:hover {
-  /* background: #878f8c; */
-}
-
-.ActivityBarItemSelected,
-.ActivityBarItem:hover {
-  color: var(--ActivityBarActiveForeground);
-}
-
-.ActivityBarItemSelected {
-  background: var(--ActivityBarActiveBackground);
-}
-
-.ActivityBarItemNested {
-  background: var(--ActivityBarBackground);
-}
-
-.ActivityBarItem:focus-visible {
-  /* background: var(--ActivityBarActiveBackground); */
-  color: var(--ActivityBarActiveForeground);
-}
-
-.ActivityBarItemBadge {
-  background: var(--BadgeBackground);
-  border-radius: 100%;
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-  text-align: center;
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
-  color: var(--BadgeForeground);
-  font-size: 9px;
-  font-weight: 600;
-}
-
-.MarginTopAuto {
-  margin-top: auto;
-}
-/*************/
-/* Alignment.css */
-/*************/
-.AlignBottom {
-  margin-top: auto;
-}
-
-.AlignRight {
-  margin-left: auto;
-}
-
-.Grow {
-  flex: 1;
-}
-/*************/
-/* AriaAlert.css */
-/*************/
-/* Alert  */
-.AriaAlert {
-  position: absolute;
-  left: -999em;
-  top: 0;
-}
-
-.AriaContainer {
-  width: 0;
-  height: 0;
-}
-/*************/
-/* BackDrop.css */
-/*************/
-.BackDrop {
-  position: fixed;
-  cursor: initial;
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: all;
-}
-/*************/
-/* Badge.css */
-/*************/
-.Badge {
-  contain: content;
-  background: var(--BadgeBackground, rgb(160, 63, 155));
-  color: var(--BadgeForeground, #eeeeee);
-  border-radius: 11px;
-  font-size: 11px;
-  font-weight: 400;
-  height: 18px;
-  min-width: 18px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 3px 6px;
-}
-/*************/
-/* Button.css */
-/*************/
-.Button {
-  contain: content;
-  display: flex;
-  border-radius: 2px;
-  border: none;
-  place-content: center;
-  place-items: center;
-  padding: 5px 10px;
-}
-
-.Button:where(:focus) {
-  background: var(--SplitButtonHoverBackground, #387674);
-  outline: 1px solid var(--FocusBorder);
-  outline-offset: 2px;
-}
-
-.ButtonPrimary {
-  background: var(--SplitButtonBackground, rgb(35, 112, 112));
-  color: var(--SplitButtonForeground, white);
-  cursor: pointer;
-}
-
-.ButtonPrimary:where(:hover),
-.ButtonPrimary:where(:focus) {
-  background: var(--SplitButtonHoverBackground, #387674);
-}
-
-.ButtonSecondary {
-  background: var(--ButtonSecondaryBackground, #313131);
-  color: var(--ButtonSecondaryForeground, #cccccc);
-  cursor: pointer;
-}
-
-.ButtonSecondary:where(:hover),
-.ButtonSecondary:where(:focus) {
-  background: var(--ButtonSecondaryHoverBackground, #45494e);
-}
-
-.ButtonNarrow {
-  max-width: 300px;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
-
-.ButtonWide {
-  max-width: 300px;
-}
-/*************/
-/* Chevron.css */
-/*************/
-.Chevron {
-  width: 16px;
-  height: 16px;
-  contain: strict;
-  position: relative;
-  mask-size: 16px;
-  mask-position: 50% 50%;
-  mask-repeat: no-repeat;
-  background: currentColor;
-}
-/*************/
-/* ContextMenu.css */
-/*************/
-:root {
-  --ContextMenuBackground: rgb(60, 60, 60);
-}
-
-#ContextMenu {
-  top: 0;
-  left: 0;
-  position: absolute;
-  background: var(--ContextMenuBackground);
-  color: var(--ContextMenuForeground, white);
-  box-shadow: var(--MenuBoxShadow, rgb(0, 0, 0) 0px 2px 4px);
-  user-select: none;
-  min-width: 150px;
-  margin: 0;
-  padding: 10px 0;
-  font-size: 13px;
-  z-index: 1;
-  outline: none;
-  pointer-events: all;
-  contain: strict;
-}
-
-#MenuBackDrop {
-  position: fixed;
-  cursor: initial;
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: all;
-}
-/*************/
-/* Drag.css */
-/*************/
-.DragImage {
-  width: 100px;
-  height: 20px;
-  background: var(--SideBarBackground); /* TODO */
-  position: absolute;
-  padding: 0 4px;
-  translate: -999px -999px;
-  willchange: translate;
-  contain: strict;
-}
-/*************/
-/* EditorTabs.css */
-/*************/
-.MainTabs {
-  height: 35px;
-  background: rgb(40, 46, 47);
-  display: flex;
-  contain: strict;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  background: var(--TabsBackground); /* TODO variable name should match class name */
-  position: absolute;
-  overflow: hidden;
-}
-
-.MainTab {
-  border-right: 1px solid var(--TabBorder, rgb(34, 34, 34));
-  background: var(--TabBackground);
-  color: var(--TabForeground);
-  /* padding-left: 5px; */
-  /* padding-right: 5px; */
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  font-size: 13px;
-  white-space: nowrap;
-  max-width: 200px;
-  contain: strict;
-  height: 100%;
-  flex-shrink: 0;
-  padding-left: 5px;
-}
-
-.MainTabPreview {
-  font-style: italic;
-}
-
-.MainTabSelected {
-  border-right: 1px solid var(--TabBorder, rgb(34, 34, 34));
-  border-bottom: 1px solid var(--TabBorderBottom, transparent);
-  background: var(--TabActiveBackground);
-  color: var(--TabActiveForeground);
-}
-
-.ManiTabLabel {
-  pointer-events: none;
-  contain: content;
-}
-
-.EditorTabCloseButton {
-  contain: strict;
-  border: none;
-  padding: 0;
-  width: 23px;
-  height: 23px;
-  position: relative;
-  background: transparent;
-  border-radius: 4px;
-  display: flex;
-  margin-left: 4px;
-  flex-shrink: 0;
-  color: var(--TabForeground);
-}
-
-.EditorTabCloseButton:hover {
-  background: rgba(255, 255, 255, 0.05);
-  transition: all 0.1s;
-}
-
-.EditorTabStatus {
-  width: 22px;
-  height: 15px;
-}
-
-/* TODO investigate whether classNames vs data-attribute makes a difference here (performance-wise) */
-.EditorTabStatus[data-status='1'] /* default */ {
-  display: none;
-}
-
-.EditorTabStatus[data-status='2'] /* modified */ {
-  background: white;
-  mask: url(/packages/renderer-process/assets/icons/circle-filled.svg) 100% 50% / 15px no-repeat;
-}
-
-.DragOver {
-  background-color: rgba(83, 89, 93, 0.5);
-}
-
-.TabLabel {
-  white-space: nowrap;
-  contain: content;
-  overflow: hidden;
-  min-width: 0;
-  flex: 1;
-  pointer-events: none;
-}
-
-.TabIcon {
-  contain: strict;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  background: currentColor;
-  mask-repeat: no-repeat;
-  mask-size: 16px;
-  mask-position: 50% 50%;
-  pointer-events: none;
-}
-/*************/
-/* FileIcon.css */
-/*************/
-.FileIcon {
-  contain: strict;
-  pointer-events: none;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-/*************/
-/* Filter.css */
-/*************/
-.Filter {
-  display: flex;
-  min-width: 214px;
-  contain: strict;
-  height: 24px;
-  align-items: center;
-  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
-}
-
-/* TODO avoid css nesting */
-.Filter .InputBox {
-  border: none;
-}
-
-.FilterBadge {
-  background: var(--BadgeBackground, rgb(160, 63, 155));
-  color: var(--BadgeForeground, #eeeeee);
-  padding: 0 4px;
-  border-radius: 2px;
-}
-/*************/
-/* Focus.css */
-/*************/
-.FocusOutline {
-  outline-color: var(--FocusOutline, lightgray);
-  outline-offset: -1px;
-  outline-style: solid;
-  outline-width: 1px;
-}
-/*************/
-/* Highlight.css */
-/*************/
-.Highlight {
-  background: var(--HighlightBackground, rgba(129, 85, 14, 0.4));
-  contain: content;
-}
-
-.HighlightInserted {
-  background: var(--HighlightInsertedBackground, rgba(156, 204, 44, 0.2));
-  text-decoration: none;
-  border: 1px solid rgba(155, 185, 85, 0.2);
-  contain: content;
-}
-
-.HighlightDeleted {
-  background: var(--HighlightDeletedBackground, rgba(255, 0, 0, 0.2));
-  border: 1px solid rgba(255, 0, 0, 0.2);
-  contain: content;
-  text-decoration: line-through;
-}
-/*************/
-/* IconButton.css */
-/*************/
-:root {
-  --IconButtonDisabledForeground: rgba(204, 204, 204, 0.5);
-}
-
-.IconButton {
-  width: 22px;
-  height: 22px;
-  contain: strict;
-  flex-shrink: 0;
-  background: transparent;
-  border: none;
-  color: #c5c5c5;
-  border-radius: 5px;
-  cursor: pointer;
-  display: flex;
-  padding: 0;
-}
-
-.IconButton:enabled:hover {
-  background-color: hsla(0, 0%, 100%, 0.1);
-}
-
-.IconButton:focus-visible {
-  outline: 1px solid #3d5252;
-  outline-offset: -1px;
-}
-
-.IconButtonDisabled {
-  color: var(--IconButtonDisabledForeground);
-}
-/*************/
-/* InputBox.css */
-/*************/
-:root {
-  --InputBoxForeground: #e1e1e1;
-}
-
-.InputBox {
-  width: 100%;
-  margin: 0;
-  border: none;
-  outline: none;
-  flex: 1;
-  background: var(--InputBoxBackground);
-  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
-  padding: 4px 6px;
-  color: var(--InputBoxForeground);
-  font-size: 13px;
-  height: 24px;
-  contain: strict;
-}
-
-/* hide small "x" on chromium  */
-.InputBox::-webkit-search-decoration,
-.InputBox::-webkit-search-cancel-button,
-.InputBox::-webkit-search-results-button,
-.InputBox::-webkit-search-results-decoration {
-  display: none;
-}
-
-.SearchFieldInput {
-  flex: 1;
-  resize: none;
-  color: var(--InputBoxForeground);
-  border: none;
-  font-size: 13px;
-  height: 24px;
-  contain: strict;
-  line-height: 24px;
-  width: 100%;
-  padding: 4px 6px;
-}
-
-.SearchFieldInput {
-  background: transparent;
-}
-
-.MultilineInputBox {
-  width: 100%;
-  margin: 0;
-  border: none;
-  outline: none;
-  flex: 1;
-  background: var(--InputBoxBackground);
-  padding: 4px 6px;
-  color: var(--InputBoxForeground);
-  font-size: 13px;
-  height: 24px;
-  contain: strict;
-  resize: none;
-  overflow: hidden;
-  white-space: pre;
-  text-overflow: ellipsis;
-}
-
-.InputBox::placeholder,
-.MultilineInputBox::placeholder {
-  color: var(--InputBoxPlaceholderForeground, rgba(255, 255, 255, 0.3));
-}
-
-.InputBox:focus {
-  border-color: var(--FocusOutline, lightgray);
-}
-/*************/
-/* Label.css */
-/*************/
-.Label {
-  white-space: nowrap;
-  contain: content;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  white-space: pre;
-}
-
-.LabelDetail {
-  font-size: 0.9em;
-  opacity: 0.7;
-  contain: content;
-  margin-left: 4px;
-}
-
-.StrikeThrough {
-  text-decoration: line-through;
-}
-/*************/
-/* MaskIcon.css */
-/*************/
-.MaskIcon,
-.Icon {
-  display: block;
-  background: currentColor;
-  mask-repeat: no-repeat;
-  mask-size: var(--MaskIconSize);
-  mask-position: 50% 50%;
-  pointer-events: none;
-  contain: strict;
-  width: 100%;
-  height: 100%;
-}
-
-.ColoredMaskIcon {
-  width: 20px;
-  height: 20px;
-  contain: strict;
-  display: block;
-  background: currentColor;
-  color: var(--TitleBarForeground, rgb(204, 204, 204));
-  mask-repeat: no-repeat;
-  mask-size: 16px;
-  mask-position: 50% 50%;
-  pointer-events: none;
-  contain: strict;
-  flex-shrink: 0;
-}
-
-.MaskIconMinimize,
-.IconMinimize {
-  mask-image: url(/f3cf31a/icons/chrome-minimize.svg);
-}
-
-.MaskIconMaximize,
-.IconMaximize {
-  mask-image: url(/f3cf31a/icons/chrome-maximize.svg);
-}
-
-.MaskIconRestore,
-.IconRestore {
-  mask-image: url(/f3cf31a/icons/chrome-restore.svg);
-}
-
-.MaskIconPlay,
-.IconPlay {
-  mask-image: url(/f3cf31a/icons/play.svg);
-}
-
-.MaskIconChromeClose,
-.IconChromeClose {
-  mask-image: url(/f3cf31a/icons/chrome-close.svg);
-}
-
-.MaskIconFiles,
-.IconFiles {
-  mask-image: url(/f3cf31a/icons/files.svg);
-}
-
-.MaskIconSearch,
-.IconSearch {
-  mask-image: url(/f3cf31a/icons/search.svg);
-}
-
-.MaskIconSourceControl,
-.IconSourceControl {
-  mask-image: url(/f3cf31a/icons/source-control.svg);
-}
-
-.MaskIconDebugAlt2,
-.IconDebugAlt2 {
-  mask-image: url(/f3cf31a/icons/debug-alt-2.svg);
-}
-
-.MaskIconExtensions,
-.IconExtensions {
-  mask-image: url(/f3cf31a/icons/extensions.svg);
-}
-
-.MaskIconSettingsGear,
-.IconSettingsGear {
-  mask-image: url(/f3cf31a/icons/settings-gear.svg);
-}
-
-.MaskIconEllipsis,
-.IconEllipsis {
-  mask-image: url(/f3cf31a/icons/ellipsis.svg);
-}
-
-.MaskIconArrowDown,
-.IconArrowDown {
-  mask-image: url(/f3cf31a/icons/arrow-down.svg);
-}
-
-.MaskIconArrowUp,
-.IconArrowUp {
-  mask-image: url(/f3cf31a/icons/arrow-up.svg);
-}
-
-.MaskIconClose,
-.IconClose,
-.EditorTabCloseButton:hover .MaskIconCircleFilled,
-.IconCircleFilled {
-  mask-image: url(/f3cf31a/icons/close.svg);
-}
-
-.MaskIconCaseSensitive,
-.IconCaseSensitive {
-  mask-image: url(/f3cf31a/icons/case-sensitive.svg);
-}
-
-.MaskIconWholeWord,
-.IconWholeWord {
-  mask-image: url(/f3cf31a/icons/whole-word.svg);
-}
-
-.MaskIconRegex,
-.IconRegex {
-  mask-image: url(/f3cf31a/icons/regex.svg);
-}
-
-.MaskIconChevronRight,
-.IconChevronRight {
-  mask-image: url(/f3cf31a/icons/chevron-right.svg);
-}
-
-.MaskIconChevronDown,
-.IconChevronDown {
-  mask-image: url(/f3cf31a/icons/chevron-down.svg);
-}
-
-.MaskIconRefresh,
-.IconRefresh {
-  mask-image: url(/f3cf31a/icons/refresh.svg);
-}
-
-.MaskIconClearAll,
-.IconClearAll {
-  mask-image: url(/f3cf31a/icons/clear-all.svg);
-}
-
-.MaskIconCloud {
-  mask-image: url(/f3cf31a/icons/cloud.svg);
-}
-
-.MaskIconTag {
-  mask-image: url(/f3cf31a/icons/tag.svg);
-}
-
-.MaskIconNewFile,
-.IconNewFile {
-  mask-image: url(/f3cf31a/icons/new-file.svg);
-}
-
-.MaskIconNewFolder,
-.IconNewFolder {
-  mask-image: url(/f3cf31a/icons/new-folder.svg);
-}
-
-.MaskIconListFlat,
-.IconListFlat {
-  mask-image: url(/f3cf31a/icons/list-flat.svg);
-}
-
-.MaskIconCollapseAll,
-.IconCollapseAll {
-  mask-image: url(/f3cf31a/icons/collapse-all.svg);
-}
-
-.MaskIconFilter,
-.IconFilter {
-  mask-image: url(/f3cf31a/icons/filter.svg);
-}
-
-.MaskIconBlank,
-.IconBlank {
-  mask-image: url(/f3cf31a/icons/blank.svg);
-}
-
-.MaskIconCheck,
-.IconCheck {
-  mask-image: url(/f3cf31a/icons/check.svg);
-}
-
-.MaskIconEllipsis,
-.IconEllipsis {
-  mask-image: url(/f3cf31a/icons/ellipsis.svg);
-}
-
-.MaskIconBook,
-.IconBook {
-  mask-image: url(/f3cf31a/icons/book.svg);
-}
-
-.MaskIconAdd,
-.IconAdd {
-  mask-image: url(/f3cf31a/icons/add.svg);
-}
-
-.MaskIconTrash,
-.IconTrash {
-  mask-image: url(/f3cf31a/icons/trash.svg);
-}
-
-.MaskIconSplitHorizontal,
-.IconSplitHorizontal {
-  mask-image: url(/f3cf31a/icons/split-horizontal.svg);
-}
-
-.MaskIconReplace,
-.IconReplace {
-  mask-image: url(/f3cf31a/icons/replace.svg);
-}
-
-.MaskIconReplaceAll,
-.IconReplaceAll {
-  mask-image: url(/f3cf31a/icons/replace-all.svg);
-}
-
-.MaskIconChevronUp,
-.IconChevronUp {
-  mask-image: url(/f3cf31a/icons/chevron-up.svg);
-}
-
-.MaskIconArrowLeft,
-.IconArrowLeft {
-  mask-image: url(/f3cf31a/icons/arrow-left.svg);
-}
-
-.MaskIconArrowRight,
-.IconArrowRight {
-  mask-image: url(/f3cf31a/icons/arrow-right.svg);
-}
-
-.MaskIconLinkExternal,
-.IconLinkExternal {
-  mask-image: url(/f3cf31a/icons/link-external.svg);
-}
-
-.MaskIconExclude,
-.IconExclude {
-  mask-image: url(/f3cf31a/icons/exclude.svg);
-}
-
-.MaskIconGoToFile,
-.IconGoToFile {
-  mask-image: url(/f3cf31a/icons/go-to-file.svg);
-}
-
-.MaskIconDiscard,
-.IconDiscard {
-  mask-image: url(/f3cf31a/icons/discard.svg);
-}
-
-.MaskIconRemove,
-.IconRemove {
-  mask-image: url(/f3cf31a/icons/remove.svg);
-}
-
-.MaskIconError,
-.IconError {
-  mask-image: url(/f3cf31a/icons/error.svg);
-}
-
-.MaskIconCircleFilled,
-.IconCircleFilled {
-  mask-image: url(/f3cf31a/icons/circle-filled.svg);
-}
-
-.MaskIconInfo,
-.IconInfo {
-  mask-image: url(/f3cf31a/icons/info.svg);
-}
-
-.MaskIconSymbolValue,
-.IconSymbolValue,
-.MaskIconSymbolDefault,
-.IconSymbolDefault {
-  mask-image: url(/f3cf31a/icons/symbol-enum.svg);
-}
-
-.MaskIconSymbolProperty,
-.IconSymbolProperty {
-  mask-image: url(/f3cf31a/icons/symbol-property.svg);
-}
-
-.MaskIconSymbolFunction,
-.IconSymbolFunction {
-  mask-image: url(/f3cf31a/icons/symbol-method.svg);
-}
-
-.MaskIconSymbolVariable,
-.IconSymbolVariable {
-  mask-image: url(/f3cf31a/icons/symbol-variable.svg);
-}
-
-.MaskIconSymbolKeyword,
-.IconSymbolKeyword {
-  mask-image: url(/f3cf31a/icons/symbol-keyword.svg);
-}
-
-.MaskIconSymbolField,
-.IconSymbolField {
-  mask-image: url(/f3cf31a/icons/symbol-field.svg);
-}
-
-.MaskIconEdit,
-.IconEdit {
-  mask-image: url(/f3cf31a/icons/edit.svg);
-}
-
-.MaskIconSymbolFile,
-.IconSymbolFile {
-  mask-image: url(/f3cf31a/icons/symbol-file.svg);
-}
-
-.MaskIconDebugPause {
-  mask-image: url(/f3cf31a/icons/debug-pause.svg);
-}
-
-.MaskIconDebugStepOver {
-  mask-image: url(/f3cf31a/icons/debug-step-over.svg);
-}
-
-.MaskIconDebugStepInto {
-  mask-image: url(/f3cf31a/icons/debug-step-into.svg);
-}
-
-.MaskIconDebugStepOut {
-  mask-image: url(/f3cf31a/icons/debug-step-out.svg);
-}
-
-.MaskIconDebugContinue {
-  mask-image: url(/f3cf31a/icons/debug-continue.svg);
-}
-
-.MaskIconTriangleRight {
-  mask-image: url(/f3cf31a/icons/triangle-right.svg);
-}
-
-.MaskIconTriangleDown {
-  mask-image: url(/f3cf31a/icons/triangle-down.svg);
-}
-
-.MaskIconDebugRestart {
-  mask-image: url(/f3cf31a/icons/debug-restart.svg);
-}
-
-.MaskIconDebugStop {
-  mask-image: url(/f3cf31a/icons/debug-stop.svg);
-}
-
-.MaskIconPreserveCase {
-  mask-image: url(/f3cf31a/icons/preserve-case.svg);
-}
-
-.MaskIconListTree {
-  mask-image: url(/f3cf31a/icons/list-tree.svg);
-}
-
-.MaskIconRecordKey {
-  mask-image: url(/f3cf31a/icons/record-keys.svg);
-}
-/*************/
-/* Menu.css */
-/*************/
-/* based on https://github.com/microsoft/vscode/blob/91687c47955bd84db607ef8aaf24b7cf35bfd1ad/src/vs/base/browser/ui/menu/menu.ts#L1005 by Microsoft (License MIT) */
-
-.Menu {
-  top: 0;
-  left: 0;
-  position: absolute;
-  background: var(--MenuBackground, rgb(60, 60, 60));
-  color: var(--MenuForeground, white);
-  box-shadow: var(--MenuBoxShadow, rgb(0 0 0 / 36%) 0px 2px 8px);
-  user-select: none;
-  min-width: 150px;
-  margin: 0;
-  padding: 4px 0;
-  font-size: 13px;
-  z-index: 1;
-  outline: none;
-  pointer-events: auto;
-  border-radius: 5px;
-}
-
-.MenuItem {
-  height: 26px;
-  padding: 0 28px;
-  align-items: center;
-  white-space: nowrap;
-  position: relative;
-  outline: none;
-  display: flex;
-  contain: content;
-  margin: 0 4px;
-  border-radius: 4px;
-}
-
-.MenuItemFocused {
-  background: var(--MenuItemHoverBackground, #687f7b33);
-  color: var(--MenuItemHoverForeground, inherit);
-  outline: none;
-}
-
-.MenuItemSubMenuArrowRight {
-  width: 16px;
-  height: 16px;
-  display: block;
-  mask-image: url(/f3cf31a/icons/chevron-right.svg);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 100%;
-  background: currentColor;
-  margin-left: auto;
-  margin-right: -20px;
-  contain: strict;
-}
-
-.MenuItemSeparator {
-  height: 11px;
-  position: relative;
-  contain: strict;
-  display: flex;
-  align-items: center;
-}
-
-.MenuItemSeparatorLine {
-  width: 100%;
-  height: 1px;
-  background: var(--MenuItemSeparatorBackground, #606060);
-}
-
-.MenuItemCheckMark {
-  padding: 0;
-}
-
-.MenuItemCheckmarkIcon {
-  width: 26px;
-  height: 26px;
-  contain: strict;
-  mask-size: 20px;
-  mask-position: 50% 50%;
-  background: currentColor;
-  mask-repeat: no-repeat;
-}
-
-.MenuItemKeyBinding {
-  padding-left: 2em;
-  margin-left: auto;
-}
-/*************/
-/* MessageAction.css */
-/*************/
-.MessageAction {
-  text-decoration: underline;
-  margin-left: 4px;
-}
-/*************/
-/* Mobile.css */
-/*************/
-body {
-  /* Disables pull-to-refresh since it interferes with scrolling */
-  overscroll-behavior: contain;
-
-  /* Disable tap highlight on chrome android */
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-}
-
-@media screen and (max-width: 600px) {
-  #QuickPick {
-    right: 0;
-    left: 0;
-    margin-right: auto;
-    margin-left: auto;
-    width: 90%;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  #QuickPick {
-    right: 0;
-    left: 0;
-    margin-right: auto;
-    margin-left: auto;
-    width: 90%;
-  }
-}
-/*************/
-/* Notification.css */
-/*************/
-/* #Notifications {
-  width: 100%;
-  height: 100%;
-} */
-
-.Notification {
-  color: white;
-  background: red;
-  z-index: 999;
-  background: black;
-  pointer-events: all;
-  position: fixed;
-  right: 30px;
-  bottom: 30px;
-  width: 250px;
-  height: 75px;
-  padding: 10px 5px;
-  background: rgb(40, 46, 47);
-  box-shadow: rgb(0 0 0 / 36%) 0px 0px 8px 2px;
-}
-
-.NotificationMessage {
-  line-height: 22px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  user-select: text;
-  margin: 0;
-  padding: 0;
-}
-
-.NotificationOption {
-  color: rgb(255, 255, 255);
-  background-color: rgb(47, 98, 96);
-  width: fit-content;
-  width: -moz-fit-content;
-  padding: 5px 10px;
-  display: inline-block;
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  padding: 4px;
-  text-align: center;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-}
-/*************/
-/* ProblemsIcon.css */
-/*************/
-.ProblemsIcon {
-  width: 16px;
-  height: 16px;
-  contain: strict;
-  mask-repeat: no-repeat;
-  mask-size: 100%;
-  mask-position: 50% 50%;
-  background: currentColor;
-}
-
-.ProblemsErrorIcon {
-  color: var(--ProblemsErrorIconForeground, #b64e4e);
-  mask-image: url(/f3cf31a/icons/error.svg);
-}
-
-.ProblemsWarningIcon {
-  color: var(--ProblemsWarningIconForeground, #91b147);
-  mask-image: url(/f3cf31a/icons/warning.svg);
-}
-/*************/
-/* ScrollBar.css */
-/*************/
-.ScrollBar {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 14px;
-  bottom: 0;
-  contain: strict;
-  cursor: default;
-}
-
-.ScrollBarHorizontal,
-.ScrollBarHorizontalSmall {
-  left: 0;
-  top: auto;
-  height: 14px;
-  width: auto;
-}
-
-.ScrollBarHorizontalSmall {
-  height: 3px;
-}
-
-.ScrollBarLarge {
-  width: 28px;
-}
-
-.ScrollBarSmall {
-  width: 10px;
-}
-/*************/
-/* ScrollBarThumb.css */
-/*************/
-.ScrollBarThumb {
-  width: 100%;
-  /* height: 40px; */
-  position: absolute;
-  contain: strict;
-  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
-}
-
-.ScrollBarThumbActive {
-  background: var(--ScrollBarThumbActiveBackground, rgba(83, 100, 100, 0.4));
-}
-
-.ScrollBarThumbHorizontal {
-  height: 100%;
-  width: auto;
-}
-/*************/
-/* SearchField.css */
-/*************/
-.SearchFieldContainer {
-  contain: content;
-  display: flex;
-  height: 26px;
-  gap: 4px;
-  flex: 1;
-}
-
-.SearchField {
-  display: flex;
-  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
-  background: var(--InputBoxBackground, rgb(36, 41, 42));
-  contain: strict;
-  height: 26px;
-  flex-grow: 1;
-}
-
-.SearchFieldButtons {
-  padding-top: 2px;
-  padding-right: 2px;
-  contain: content;
-  display: flex;
-  gap: 2px;
-}
-
-.SearchFieldButton {
-  position: relative;
-  background: transparent;
-  border: 1px solid transparent;
-  color: white;
-  contain: strict;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  padding: 1px;
-}
-
-.SearchFieldButton:focus-visible {
-  outline: 1px solid #3d5252;
-  outline-offset: -1px;
-}
-
-.SearchFieldButton:where(:hover) {
-  background: rgba(90, 93, 94, 0.31);
-}
-
-.SearchFieldButtonChecked {
-  border-color: #a03f9b;
-}
-
-.SearchButtonReplaceAll {
-  position: relative;
-}
-/*************/
-/* SearchHeader.css */
-/*************/
-.SearchHeader {
-  padding-top: 5px;
-  contain: content;
-}
-
-.SearchHeaderTop {
-  display: flex;
-  contain: content;
-  padding-right: 12px;
-}
-
-.SearchHeaderTopRight {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  contain: content;
-  gap: 6px;
-}
-
-.SearchHeaderDetails {
-  display: flex;
-  position: relative;
-  contain: strict;
-  width: 100%;
-  height: 30px;
-  justify-content: space-between;
-  padding-right: 10px;
-  align-items: end;
-}
-
-.SearchHeaderDetailsExpanded {
-  display: flex;
-  flex-direction: column;
-}
-
-.ToggleDetails {
-  width: 20px;
-  height: 20px;
-  --MaskIconSize: 15px;
-  cursor: pointer;
-  align-self: flex-start;
-}
-
-.SearchHeaderDetailsExpanded {
-  padding: 10px;
-  contain: content;
-  padding-left: 20px;
-  padding-top: 0;
-}
-
-/* TODO avoid nesting */
-
-.SearchHeaderDetailsExpanded .ViewletSearchMessage {
-  padding-left: 0;
-}
-
-.SearchHeaderDetailsExpanded .ViewletSearchMessage {
-  padding-left: 0;
-}
-
-.SearchHeaderDetailsHeading {
-  font-size: 11px;
-  font-weight: 400;
-  margin: 0;
-  overflow: hidden;
-  padding: 4px 0 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: rgb(188, 190, 190);
-  flex: 1;
-}
-
-.SearchHeaderDetailsExpandedTop {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-}
-/*************/
-/* SearchMessage.css */
-/*************/
-.ViewletSearchMessage {
-  color: rgba(156, 162, 160, 0.65);
-  padding-bottom: 8px;
-  padding-top: 5px;
-  padding-left: 22px;
-  contain: content;
-  line-height: 13px;
-}
-/*************/
-/* SplitButton.css */
-/*************/
-.SplitButton {
-  background: var(--SplitButtonBackground, rgb(35, 112, 112));
-  color: var(--SplitButtonForeground, white);
-  height: 28px;
-  contain: strict;
-  display: flex;
-  border-radius: 2px;
-  margin-right: 12px;
-  margin-left: 19px;
-  margin-bottom: 6px;
-}
-
-.SplitButtonContent {
-  contain: strict;
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  outline: none;
-}
-
-.SplitButtonContent:where(:hover),
-.SplitButtonContent:where(:focus),
-.SplitButtonDropDown:where(:hover),
-.SplitButtonDropDown:where(:focus) {
-  background: var(--SplitButtonHoverBackground, #387674);
-}
-
-.SplitButtonDisabled {
-  background: #2f6260;
-  opacity: 0.4;
-}
-
-.SplitButtonContentDisabled,
-.SplitButtonDropDownDisabled {
-  cursor: default;
-}
-
-.SplitButtonSeparator {
-  height: 90%;
-  width: 1px;
-  background: rgba(255, 255, 255, 0.4);
-  contain: strict;
-}
-
-.SplitButtonDropDown {
-  width: 25px;
-  height: 100%;
-  contain: strict;
-  cursor: pointer;
-  border-right: 1px solid transparent;
-  outline: none;
-}
-/*************/
-/* Symbol.css */
-/*************/
-:root {
-  --SymbolValueForeground: #ee9d28;
-  --SymbolPropertyForeground: #aaaaaa;
-  --SymbolVariableForeground: #75beff;
-  --SymbolFunctionForeground: #b180d7;
-  --SymbolKeywordForeground: #9ca2a0;
-  --SymbolFieldForeground: #75beff;
-}
-
-.SymbolValue,
-.SymbolDefault {
-  color: var(--SymbolValueForeground);
-  mask-image: url(/f3cf31a/icons/symbol-enum.svg);
-}
-
-.SymbolProperty {
-  color: var(--SymbolPropertyForeground);
-  mask-image: url(/f3cf31a/icons/symbol-property.svg);
-}
-
-.SymbolFunction {
-  color: var(--SymbolFunctionForeground);
-  mask-image: url(/f3cf31a/icons/symbol-method.svg);
-}
-
-.SymbolVariable {
-  color: var(--SymbolVariableForeground);
-  mask-image: url(/f3cf31a/icons/symbol-variable.svg);
-}
-
-.SymbolKeyword {
-  color: var(--SymbolKeywordForeground);
-  mask-image: url(/f3cf31a/icons/symbol-keyword.svg);
-}
-
-.SymbolField {
-  color: var(--SymbolFieldForeground);
-  mask-image: url(/f3cf31a/icons/symbol-field.svg);
-}
-/*************/
-/* TreeItem.css */
-/*************/
-.TreeItem {
-  color: var(--TreeItemForeground, rgb(188, 190, 190));
-  display: flex;
-  gap: 4px;
-  height: 22px;
-  line-height: 22px;
-  contain: strict;
-  width: 100%;
-  align-items: center;
-  cursor: pointer;
-}
-
-.TreeItem:where(:hover) {
-  background: var(--TreeItemHoverBackground, rgba(64, 92, 80, 0.2));
-  color: var(--TreeItemHoverForeground, #e0e0e0);
-}
-
-/* TODO don't use id for styling */
-#TreeItemActive,
-.TreeItemActive {
-  background: var(--TreeItemActiveBackground, rgba(59, 71, 66, 0.5));
-}
-/*************/
-/* Viewlet.css */
-/*************/
-.Viewlet {
-  contain: strict;
-  flex: 1;
-}
-
-.ViewletError {
-  color: lightgray;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 1rem;
-  width: 100%;
-  text-align: center;
-}
-/*************/
-/* ViewletActivityBar.css */
-/*************/
-.ActivityBar {
-  color: var(--ActivityBarForeground);
-  display: flex;
-  flex-direction: column;
-}
-/*************/
-/* ViewletColorPicker.css */
-/*************/
-.ColorPicker {
-  /* TODO */
-  width: calc(300px + 40px); /* extra space for scroll bar thumb */
-  height: 200px;
-  contain: strict;
-  display: flex;
-  flex-direction: column;
-  background: var(--MainBackground);
-  padding: 0 20px;
-  pointer-events: all;
-}
-
-.ColorPickerRectangle {
-  contain: strict;
-  flex: 1;
-}
-
-.ColorPickerBackgroundColor,
-.ColorPickerLight,
-.ColorPickerDark {
-  position: absolute;
-  inset: 0;
-  contain: strict;
-}
-
-.ColorPickerBackgroundColor {
-  background: var(--ColorPickerColor);
-}
-
-.ColorPickerLight {
-  background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
-}
-
-.ColorPickerDark {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0));
-}
-
-.ColorPickerSlider {
-  height: 10px;
-  width: 100%;
-  background: linear-gradient(to right, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
-  border-radius: 5px;
-  position: relative;
-  margin: 20px auto;
-  contain: strict;
-}
-
-.ColorPickerSliderThumb {
-  position: absolute;
-  top: calc(-15px + 2px + 5px + 150px + 20px + 2px);
-  left: calc(-15px + 2px + 5px + 20px);
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid white;
-  touch-action: none;
-  background: var(--ColorPickerColor);
-  contain: strict;
-}
-/*************/
-/* ViewletEditor.css */
-/*************/
-/* TODO this should not be global */
-.Editor {
-  width: 100%;
-  height: 100%;
-  background: var(--MainBackground);
-  color: white;
-  outline: none;
-  border: none;
-  font-family: var(--EditorFontFamily);
-  position: relative;
-  white-space: pre;
-  font-size: var(--EditorFontSize);
-  letter-spacing: var(--EditorLetterSpacing);
-  font-feature-settings: var(--EditorFontFeatureSettings);
-  tab-size: var(--EditorTabSize);
-  font-display: block;
-  cursor: text;
-  font-weight: var(--EditorFontWeight);
-  position: absolute;
-  display: flex;
-}
-
-.EditorContent {
-  contain: strict;
-  width: 100%;
-  height: 100%;
-}
-
-.EditorLayers {
-  contain: strict;
-  width: 100%;
-  height: 100%;
-}
-
-.EditorRows {
-  white-space: pre;
-  width: 100%;
-  height: 100%;
-  contain: strict;
-}
-
-.EditorRow {
-  display: block;
-  height: var(--EditorLineHeight);
-  line-height: var(--EditorLineHeight);
-  contain: strict;
-}
-
-.Editors {
-  flex: 1;
-}
-
-.EditorCursor {
-  width: 2px;
-  height: var(--EditorLineHeight);
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: var(--EditorCursorBackground, red);
-  pointer-events: none;
-  contain: strict;
-}
-
-.ScrollBarDiagnostics {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  width: 14px;
-}
-
-.ScrollBarDiagnostic {
-  height: 5px;
-  background: red;
-  width: 100%;
-  position: absolute;
-}
-
-.EditorInput {
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  padding: 0;
-  border: 0;
-  font-size: 1px; /* needs to be at least one pixel because otherwise chrome will not emit input events */
-  top: -9999px;
-  left: -9999px;
-  /* contain: strict; */
-  /* visibility: hidden; */
-}
-
-/* interesting: could do transform via css -> only set data-row, data-column on editor cursor */
-/* .EditorCursor::after {
-  position: absolute;
-  content: attr(data-row-index);
-} */
-
-/* great css solution -> only nesting is bad -> can be avoided?
-.Editor:not(:focus-within) .EditorCursor {
-  display: none;
-} */
-
-.EditorSelection {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  background: var(--EditorSelectionBackground);
-}
-
-.Token {
-  contain: content;
-}
-
-.LayerCursor,
-.LayerDiagnostics {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.Diagnostic {
-  position: absolute;
-  contain: strict;
-}
-
-.DiagnosticError {
-  background: url(/f3cf31a/icons/squiggly-error.svg) repeat-x bottom left;
-}
-
-.DiagnosticWarning {
-  background: url(/f3cf31a/icons/squiggly-warning.svg) repeat-x bottom left;
-}
-
-.Token.EditorGoToDefinitionLink {
-  color: #4e94ce !important;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.EditorOverlayMessage {
-  padding: 1px 4px;
-  background-color: #063b49;
-  border: 1px solid #007acc;
-  color: white;
-  pointer-events: all;
-  user-select: text;
-}
-
-.Link {
-  text-decoration: underline;
-}
-
-.Gutter {
-  contain: strict;
-  width: 30px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.Gutter:empty {
-  display: none;
-}
-
-.LineNumber {
-  color: var(--EditorLineNumberForeground, rgba(155, 162, 160, 0.3));
-  contain: strict;
-  margin-right: 1px;
-  height: var(--EditorLineHeight);
-  text-align: right;
-}
-/*************/
-/* ViewletEditorCodeGenerator.css */
-/*************/
-.CodeGeneratorWidget {
-  background: var(--HoverWidgetBackground, #282e2f);
-  border: 1px solid;
-  border-color: var(--EditorWidgetBorder, #454545);
-  color: var(--ListForeground, white);
-  border-radius: 2px;
-  z-index: 922;
-  pointer-events: all;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-}
-
-.CodeGeneratorMessage {
-  font-size: 11px;
-  padding: 3px;
-}
-/*************/
-/* ViewletEditorCompletion.css */
-/*************/
-.EditorCompletion {
-  background: var(--CompletionListBackground, #282e2f);
-  color: var(--CompletionListForeground, white);
-  user-select: none;
-  font-size: 15px;
-  pointer-events: all;
-  border: 1px solid;
-  border-color: var(--CompletionListBorder, #95a29d);
-  font-family: var(--EditorFontFamily);
-  position: absolute;
-}
-
-.EditorCompletionItem {
-  height: 20px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  contain: strict;
-  gap: 5px;
-  padding-left: 1px;
-  position: absolute;
-  cursor: pointer;
-}
-
-/* TODO reuse same highlight css for quickpick */
-.EditorCompletionItemHighlight {
-  color: var(--CompletionHighlightForeground, #e1b974);
-  font-weight: 700;
-  contain: content;
-}
-
-.EditorCompletionItem:where(:hover) {
-  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
-}
-
-.EditorCompletionItemFocused {
-  background: var(--CompletionListItemActiveBackground, #405c50);
-  color: var(--CompletionListItemActiveForeground);
-}
-
-/* TODO maybe put this all into editor */
-
-/* Rename Widget */
-.RenameWidget {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: auto;
-}
-
-/* Error Widget */
-.EditorWidgetError {
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: white;
-  background: rgb(37, 35, 35);
-  pointer-events: auto;
-}
-
-.EditorCompletionItemDeprecated {
-  text-decoration: line-through;
-}
-/*************/
-/* ViewletEditorCompletionDetail.css */
-/*************/
-.EditorCompletionDetails {
-  position: absolute;
-  z-index: 1;
-  background: var(--CompletionListBackground, #282e2f);
-  padding: 5px;
-  pointer-events: all;
-  border: 1px solid;
-  border-color: var(--CompletionListBorder, #95a29d);
-}
-
-.CompletionDetailCloseButton {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 20px;
-  height: 20px;
-}
-/*************/
-/* ViewletEditorError.css */
-/*************/
-:root {
-  --IconErrorForeground: rgb(182, 78, 78);
-}
-
-.TextEditorError {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  font-size: 14px;
-  color: rgb(156, 162, 160);
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.EditorTextIcon {
-  width: 48px;
-  height: 48px;
-  contain: strict;
-  --MaskIconSize: 48px;
-}
-
-.EditorTextIconError {
-  color: var(--IconErrorForeground);
-}
-/*************/
-/* ViewletEditorHover.css */
-/*************/
-:root {
-  --HoverWidgetForeground: #9ca2a0;
-  --HoverWidgetBackground: #282e2f;
-}
-
-.EditorHover {
-  background: var(--HoverWidgetBackground, #282e2f);
-  border-color: var(--CompletionListBorder, #95a29d);
-  border: 1px solid;
-  bottom: 0;
-  color: var(--HoverWidgetForeground, white);
-  contain: content;
-  cursor: text;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-height: 20px;
-  position: absolute;
-  user-select: text;
-  overflow: auto;
-  pointer-events: all;
-}
-
-/* TODO use javascript scrollbar */
-.EditorHover::-webkit-scrollbar {
-  height: 14px;
-}
-
-.EditorHover::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.EditorHover::-webkit-scrollbar-thumb {
-  background: var(--EditorScrollBarBackground);
-}
-
-.HoverEditorRow {
-  display: block;
-  height: var(--EditorLineHeight);
-  line-height: var(--EditorLineHeight);
-  /* contain: strict; */
-}
-
-.HoverDisplayString {
-  white-space: pre;
-  /* contain: content; */
-  font-family: var(--EditorFontFamily);
-  font-size: var(--EditorFontSize);
-  letter-spacing: var(--EditorLetterSpacing);
-  font-feature-settings: var(--EditorFontFeatureSettings);
-  tab-size: var(--EditorTabSize);
-  font-display: block;
-  padding: 4px 8px;
-}
-
-/* TODO don't use pseudo selectors */
-.HoverDisplayString:not(:first-child) {
-  border-top: 1px solid rgba(149, 162, 157, 0.5);
-}
-
-.HoverDocumentation {
-  contain: content;
-  font-size: 15px;
-  line-height: 1.33333;
-  padding: 4px 8px;
-}
-
-.HoverProblem {
-  contain: content;
-  display: flex;
-}
-
-.HoverProblemMessage {
-  content: content;
-}
-
-.HoverProblemDetail {
-  opacity: 0.6;
-  contain: content;
-  padding-left: 6px;
-}
-/*************/
-/* ViewletEditorRename.css */
-/*************/
-.EditorRename {
-  z-index: 22;
-  pointer-events: all;
-  position: absolute;
-}
-/*************/
-/* ViewletEditorSourceActions.css */
-/*************/
-.EditorSourceActions {
-  background: var(--HoverWidgetBackground, #282e2f);
-  border: 1px solid;
-  border-color: var(--EditorWidgetBorder, #454545);
-  color: var(--ListForeground, white);
-  border-radius: 2px;
-  z-index: 22;
-  pointer-events: all;
-  position: absolute;
-}
-
-.SourceActionHeading {
-  height: 26px;
-  contain: strict;
-  padding: 0 10px;
-  line-height: 26px;
-  color: var(--DescriptionForeground, rgba(156, 162, 160, 0.7));
-}
-
-.SourceActionItem {
-  height: 24px;
-  contain: strict;
-  padding: 0 10px;
-  line-height: 24px;
-  display: flex;
-}
-
-.SourceActionItem:where(:hover) {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
-
-.SourceActionItemFocused {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
-
-.SourceActionIcon {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  --MaskIconSize: 14px;
-}
-/*************/
-/* ViewletExplorer.css */
-/*************/
-:root {
-  --DropTargetBackground: #062f4a;
-}
-
-.Explorer {
-  outline: none;
-}
-
-.ListItems {
-  user-select: none;
-}
-
-.DropTarget {
-  background: var(--DropTargetBackground);
-}
-/*************/
-/* ViewletFindWidget.css */
-/*************/
-:root {
-  --ErrorForeground: #f48771;
-}
-
-.FindWidget {
-  /* TODO create separate variable for this */
-  background: var(--ActivityBarBackground);
-  z-index: 1;
-  display: flex;
-  padding: 0 4px;
-  position: absolute;
-  --MaskIconSize: 16px;
-  pointer-events: all;
-}
-
-.FindWidgetRight {
-  display: flex;
-  flex-direction: column;
-  contain: strict;
-  flex: 1;
-}
-
-.FindWidgetFind {
-  display: flex;
-  contain: strict;
-  flex: 1;
-  align-items: center;
-}
-
-.FindWidgetReplace {
-  display: flex;
-  contain: strict;
-  flex: 1;
-  align-items: center;
-}
-
-.FindWidgetDetails {
-  display: flex;
-  contain: content;
-  align-items: center;
-  height: 100%;
-}
-
-.FindWidgetMatchCount {
-  width: 70px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  contain: strict;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  margin-left: 3px;
-  font-size: 13px;
-}
-
-.FindWidgetMatchCountEmpty {
-  color: var(--ErrorForeground);
-}
-/*************/
-/* ViewletLayout.css */
-/*************/
-.Workbench {
-  width: 100%;
-  height: 100%;
-  contain: strict;
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.TitleBar,
-.SideBar,
-.Main,
-.ActivityBar,
-.Panel,
-.StatusBar {
-  /*
-   * not sure why this works, but position fixed combined with backface
-   * visibility hidden gives great rendering performance,
-   * see also https://benfrain.com/improving-css-performance-fixed-position-elements/
-   *
-   *
-   * typing benchmark (before):
-   * 216ms scripting
-   * 62ms rendering
-   * 26ms painting
-   * 100ms system
-   *
-   * typing benchmark (after):
-   * 189ms scripting
-   * 117ms rendering
-   * 41ms painting
-   * 122ms system
-   */
-  position: fixed;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-}
-
-.ActivityBar {
-  background: var(--ActivityBarBackground);
-}
-
-.SideBar {
-  background: var(--SideBarBackground, rgb(30, 35, 36));
-}
-
-.Main {
-  background: var(--MainBackground);
-}
-
-.StatusBar {
-  background: var(--StatusBarBackground);
-}
-
-.TitleBar {
-  background: rgb(40, 46, 47);
-  background: var(--TitleBarBackground);
-}
-
-.Panel {
-  background: var(--PanelBackground);
-}
-/*************/
-/* ViewletList.css */
-/*************/
-.List {
-  position: relative;
-}
-
-.ListItems {
-  flex: 1;
-  contain: strict;
-  position: relative;
-  height: 100%;
-}
-/*************/
-/* ViewletMain.css */
-/*************/
-.Main {
-  background: var(--MainBackground);
-  position: absolute;
-}
-
-.DragOverlay {
-  position: absolute;
-  background: rgba(83, 89, 93, 0.5);
-  z-index: 1;
-  pointer-events: none;
-  transition: all 100ms;
-  contain: strict;
-}
-
-/* TODO make all error viewlets position absolute? */
-.Main .Error {
-  position: absolute;
-}
-/*************/
-/* ViewletQuickPick.css */
-/*************/
-/* TODO commit 9fcc3db9e37ec708459f3ba96715ca1286fc53b4 might be a bit faster
-   for quickpick to open (3.3ms recalculcate style vs 4.2ms now)  */
-
-/* TODO recalculate style is really slow in chrome for unknown reasons */
-.QuickPick {
-  position: absolute;
-  width: 600px;
-  top: 50px;
-  left: 50%;
-  margin-left: -300px; /* TODO maybe this should be 301px because of padding to be centered */
-  padding: 0 1px 6px;
-  background: var(--QuickPickBackground);
-  color: var(--ListForeground);
-  box-sizing: border-box;
-  /* TODO is this useful? */
-  contain: content !important;
-  /* TODO is this useful? */
-  /* transform: translate3d(0, 0, 0); */
-  display: flex;
-  flex-direction: column;
-  pointer-events: all;
-  /* inset: 0; */
-  /* will-change: transform; */
-  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
-}
-
-.QuickPickHeader {
-  display: flex;
-  padding: 8px 6px 6px;
-  height: 38px;
-  contain: strict;
-}
-
-.QuickPickItems {
-  outline: 0;
-  margin: 0;
-  padding: 0 5px;
-  overflow: hidden;
-  contain: strict;
-  background: var(--QuickPickBackground);
-}
-
-.QuickPickItem {
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
-  width: 100%;
-  height: 22px;
-  font-size: 13px;
-  margin: 0;
-  padding: 0 6px 0 11px;
-  contain: strict;
-  gap: 6px;
-  line-height: 22px;
-  border-radius: 3px;
-}
-
-.QuickPickItem:where(:hover) {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
-
-.QuickPickItemActive {
-  color: var(--ListActiveSelectionForeground);
-  background: var(--ListActiveSelectionBackground);
-}
-
-/* TODO avoid nesting */
-.QuickPickItemActive .QuickPickItemDescription {
-  color: color-mix(in oklab, var(--ListActiveSelectionForeground), var(--ListActiveSelectionBackground) 30%);
-}
-
-.QuickPickItemLabel {
-  contain: content;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: pre;
-  flex-shrink: 0;
-}
-
-.QuickPickItemDescription {
-  font-size: 0.9em;
-  pointer-events: none;
-  contain: content;
-  /* TODO compute mixed color in javascript once for effiency */
-  color: color-mix(in oklab, var(--ListForeground), var(--QuickPickBackground) 30%);
-}
-
-/* TODO use aria annouce for this */
-.QuickPickCount {
-  /* Screen Reader Only */
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
-/* TODO reuse same highlight css for completions */
-.QuickPickHighlight {
-  color: var(--CompletionHighlightForeground, #e1b974);
-  font-weight: 700;
-  contain: content;
-}
-
-.QuickPickMaskIcon {
-  display: block;
-  background: currentColor;
-  mask-repeat: no-repeat;
-  mask-size: var(--MaskIconSize);
-  mask-position: 50% 50%;
-  pointer-events: none;
-  contain: strict;
-  width: 20px;
-  height: 20px;
-  mask-size: 70%;
-}
-/*************/
-/* ViewletSash.css */
-/*************/
-.Sash {
-  position: fixed;
-  contain: strict;
-  z-index: 1;
-}
-
-.SashHorizontal {
-  height: 4px;
-  cursor: row-resize;
-}
-
-.SashVertical {
-  width: 4px;
-  cursor: col-resize;
-}
-
-.SashVisible {
-  display: flex;
-  justify-content: center;
-}
-
-.SashActive {
-  background: var(--SashHoverBorder, #3d5252);
-}
-
-.SashResize {
-  top: 0;
-  right: 0;
-  height: 100%;
-}
-/*************/
-/* ViewletSideBar.css */
-/*************/
-.SideBar {
-  color: var(--SideBarForeground, white);
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-}
-
-.SideBarTitleArea {
-  contain: strict;
-  display: flex;
-  height: 35px;
-  line-height: 35px;
-  padding: 0 8px;
-}
-
-.SideBarTitleAreaTitle {
-  font-size: 11px;
-  cursor: default;
-  font-weight: 400;
-  margin: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  padding-left: 12px;
-  contain: strict;
-  flex: 1;
-}
-/*************/
-/* ViewletStatusBar.css */
-/*************/
-.StatusBar {
-  display: flex;
-  justify-content: space-between;
-}
-
-.StatusBar {
-  height: 23px; /* 22px content + 1px border top */
-  border-top: 1px solid var(--StatusBarBorderTopColor);
-  display: flex;
-  color: var(--StatusBarForeground, rgb(98, 112, 106));
-  display: flex;
-  justify-content: space-between;
-}
-
-.StatusBarItemsLeft,
-.StatusBarItemsRight {
-  /* contain: content; */
-  margin: 0;
-  display: flex;
-}
-
-.StatusBarItemsLeft {
-  padding-left: 7px;
-}
-
-.StatusBarItemsRight {
-  padding-right: 7px;
-}
-
-.StatusBarItem {
-  display: flex;
-  line-height: 22px;
-  height: 100%;
-  outline: none;
-  padding: 0 5px;
-  margin: 0 3px;
-  cursor: pointer;
-  font-size: 12px;
-  align-items: center;
-  /* contain: content; */
-}
-
-.StatusBarItem:hover {
-  background: rgba(255, 255, 255, 0.12);
-}
-
-.StatusBarItem:active {
-  background: rgba(255, 255, 255, 0.18);
-}
-
-.StatusBarIcon {
-  outline: none;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 1em;
-  background: currentColor;
-
-  /* TODO have common icon css for activity bar and status bar */
-  width: 1em;
-  height: 1em;
-  display: block;
-  margin-right: 4px;
-}
-/*************/
-/* ViewletTitleBar.css */
-/*************/
-.TitleBar {
-  display: flex;
-  color: var(--TitleBarForeground, rgba(204, 204, 204, 0.6));
-  -webkit-app-region: drag;
-  app-region: drag;
-}
-
-.TitleBarActive {
-  color: var(--TitleBarForegroundActive, rgb(204, 204, 204));
-  background: var(--TitleBarActiveBackground, var(--TitleBarBackground));
-}
-/*************/
-/* ViewletTitleBarButtons.css */
-/*************/
-.TitleBarButtons {
-  margin-left: auto;
-  app-region: drag;
-  contain: strict;
-  flex-grow: 2;
-  display: flex;
-}
-
-.TitleBarButton {
-  width: 46px;
-  height: 100%;
-  contain: strict;
-  background: transparent;
-  border: none;
-  color: currentColor;
-  app-region: no-drag;
-}
-
-.TitleBarButton:hover {
-  background-color: hsla(0, 0%, 100%, 0.1);
-}
-
-.TitleBarButtonMinimize {
-  margin-left: auto;
-}
-
-.TitleBarButtonClose:hover {
-  background-color: var(--TitleBarButtonCloseHoverBackground, rgba(232, 17, 35, 0.9));
-  color: var(--TitleBarButtonCloseHoverForeground, currentColor);
-}
-/*************/
-/* ViewletTitleBarIcon.css */
-/*************/
-.TitleBarIcon {
-  contain: strict;
-  flex-basis: 30px !important;
-  flex-grow: 0 !important;
-  flex-shrink: 0 !important;
-  height: 100%;
-  width: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.TitleBarIconIcon {
-  width: 16px;
-  height: 16px;
-  contain: strict;
-}
-/*************/
-/* ViewletTitleBarMenuBar.css */
-/*************/
-.TitleBarMenuBar {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  -webkit-app-region: no-drag;
-  app-region: no-drag;
-  contain: content;
-  flex-grow: 2;
-  outline: none;
-}
-
-.TitleBarTopLevelEntry {
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  contain: content;
-}
-
-.TitleBarTopLevelEntryLabel {
-  height: 22px;
-  border-radius: 5px;
-  background: var(--TitleBarItemHoverForeground, rgba(90, 93, 94, 0.31));
-  pointer-events: none;
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
-  /* contain: content; */
-}
-
-/* TODO use class name instead */
-.TitleBarEntryActive {
-  padding: 0;
-}
-
-/* TODO maybe have extra focus outline border */
-/*
-:focus {
-  border: 2px solid green;
-} */
-/*************/
-/* ViewletTitleBarTitle.css */
-/*************/
-.TitleBarTitle {
-  /* color: orange; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-/*************/
-/* WebView.css */
-/*************/
-.WebView {
-  contain: strict;
-  position: absolute;
-  display: flex;
-  background: white;
-}
-
-/* TODO this wrapper element might not be needed */
-.WebViewWrapper {
-  display: flex;
-  flex: 1;
-  contain: strict;
-}
-
-.WebViewIframe {
-  flex: 1;
-  contain: strict;
-  border: none;
-  position: absolute;
-  background: white;
-  z-index: 1;
-}
-/*************/
-/* Welcome.css */
-/*************/
-.Welcome {
-  contain: strict;
-  width: 100%;
-  height: 100%;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-bottom: 13px;
-  display: flex;
-  flex-direction: column;
-  gap: 13px;
-}
-
-.WelcomeMessage {
-  color: var(--WorkbenchForeground);
-  margin: 0;
-}
-/*************/
-/* Widgets.css */
-/*************/
-.Widgets {
-  contain: strict;
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-  backface-visibility: hidden;
-}
-
-/* TODO maybe hide widgets container if empty*/
-.Widgets:empty {
-  display: none;
-}