@lvce-editor/server 0.0.28 → 0.0.31

package/static/f9b8874/css/App.css

@@ -1,2319 +0,0 @@
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-
-/*
-Document
-========
-*/
-
-/**
-Use a better box model (opinionated).
-*/
-
-*,
-::before,
-::after {
-	box-sizing: border-box;
-}
-
-/**
-Use a more readable tab size (opinionated).
-*/
-
-html {
-	-moz-tab-size: 4;
-	tab-size: 4;
-}
-
-/**
-1. Correct the line height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-*/
-
-html {
-	line-height: 1.15; /* 1 */
-	-webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/*
-Sections
-========
-*/
-
-/**
-Remove the margin in all browsers.
-*/
-
-body {
-	margin: 0;
-}
-
-/**
-Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-*/
-
-body {
-	font-family:
-		system-ui,
-		-apple-system, /* Firefox supports this but not yet `system-ui` */
-		'Segoe UI',
-		Roboto,
-		Helvetica,
-		Arial,
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji';
-}
-
-/*
-Grouping content
-================
-*/
-
-/**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
-
-hr {
-	height: 0; /* 1 */
-	color: inherit; /* 2 */
-}
-
-/*
-Text-level semantics
-====================
-*/
-
-/**
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr[title] {
-	text-decoration: underline dotted;
-}
-
-/**
-Add the correct font weight in Edge 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
-============
-*/
-
-/**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
-
-table {
-	text-indent: 0; /* 1 */
-	border-color: inherit; /* 2 */
-}
-
-/*
-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 */
-}
-
-/**
-Remove the inheritance of text transform in Edge and Firefox.
-1. Remove the inheritance of text transform in Firefox.
-*/
-
-button,
-select { /* 1 */
-	text-transform: none;
-}
-
-/**
-Correct the inability to style clickable types in iOS and Safari.
-*/
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-	-webkit-appearance: button;
-}
-
-/**
-Remove the inner border and padding in Firefox.
-*/
-
-::-moz-focus-inner {
-	border-style: none;
-	padding: 0;
-}
-
-/**
-Restore the focus styles unset by the previous rule.
-*/
-
-:-moz-focusring {
-	outline: 1px dotted ButtonText;
-}
-
-/**
-Remove the additional ':invalid' styles in Firefox.
-See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
-*/
-
-:-moz-ui-invalid {
-	box-shadow: none;
-}
-
-/**
-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;
-}
-
-.Layers {
-  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;
-}
-
-/*************/
-/* __Theme.css */
-/*************/
-:root {
-  /* TODO sizes is not theme */
-  --EditorFontSize: 16px;
-  --EditorLineHeight: 20px;
-}
-/*************/
-/* _Global.css */
-/*************/
-@font-face {
-  font-family: 'Fira Code';
-  src: url(/f9b8874/fonts/FiraCode-VariableFont.ttf) format('truetype');
-}
-
-/* TODO check if contain strict also makes sense for html and body */
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  /* font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; */
-  font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
-  user-select: none;
-}
-
-#Workbench {
-  width: 100%;
-  height: 100%;
-  /* width: 800px;
-  height: 600px; */
-  contain: strict;
-  font-size: 13px;
-  line-height: 1.4;
-  /* display: grid; */
-}
-
-#TitleBar,
-#SideBar,
-#Main,
-#ActivityBar,
-#Panel,
-#StatusBar {
-  contain: strict;
-  /*
-   * 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;
-}
-
-#TitleBar {
-}
-
-#Main {
-  width: 100%;
-  height: 100%;
-}
-
-/* TODO droptarget css can be lazy loaded and should be in main.css */
-#Main.DropTarget::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 90, 0.5);
-  z-index: 1;
-}
-
-#SideBar {
-  /* TODO width and height are set via javascript, this might not be necessary */
-  width: 200px;
-  height: 200px;
-  bottom: 0;
-  right: 0;
-}
-
-.Hidden {
-  display: none !important;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-/* TODO */
-*::-webkit-scrollbar {
-  /* width: 10px; */
-}
-*::-webkit-scrollbar-track {
-  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
-}
-
-*::-webkit-scrollbar-thumb {
-  /* background-color: rgba(57, 71, 71, 0.6); */
-  /* outline: 1px solid slategrey; */
-}
-
-/*
- * Using the will-change attribute creates a separate layer.
- * Updating that layer will be faster since only that layer needs style recalculation and repainting (instead of the whole page)
- * However this hack should be used sparingly since too many layers can have negative impact for performance
- */
-.TransformHack {
-  /* will-change: transform;
-  contain: strict; */
-}
-/*************/
-/* Widgets.css */
-/*************/
-#Widgets {
-  contain: strict;
-  position: fixed;
-  top: 0;
-  left: 0;
-  inset: 0;
-  pointer-events: none;
-}
-
-/* TODO maybe hide widgets container if empty*/
-#Widgets:empty {
-  display: none;
-}
-/*************/
-/* ViewletTerminal.css */
-/*************/
-
-.TerminalCanvasText {
-  width: 780px;
-  height: 625px;
-}
-
-.TerminalCanvasCursor {
-  width: 780px;
-  height: 625px;
-}
-/*************/
-/* ViewletSourceControl.css */
-/*************/
-.Viewlet[data-viewlet-id='SourceControl']:focus {
-  outline: 1px solid red;
-  outline-offset: -1px;
-}
-
-.ViewSourceControlInput {
-  /* margin: 20px; */
-}
-
-.ViewSourceControlInput[aria-busy] {
-  background: lightblue;
-}
-/*************/
-/* ViewletSearch.css */
-/*************/
-.Viewlet[data-viewlet-id='Search']:focus {
-  outline: 1px solid red;
-  outline-offset: -1px;
-}
-
-.ViewletSearchInput {
-  /* background-color: rgb(36, 41, 42);
-  color: rgb(225, 225, 225);
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgb(55, 65, 63);
-  padding: 2px 4px;
-  width: 100%;
-  font-size: 80%;
-  line-height: 100%;
-  height: 26px; */
-  margin-left: 18px;
-  width: calc(100% - 36px);
-}
-/*************/
-/* ViewletRunAndDebug.css */
-/*************/
-.Viewlet[data-viewlet-id='RunAndDebug'] {
-}
-/*************/
-/* ViewletReferences.css */
-/*************/
-.Viewlet[data-viewlet-id='Locations'] {
-  display: flex;
-  flex-direction: column;
-}
-
-.LocationsMessage {
-  padding: 4px 12px 4px 18px;
-  user-select: text;
-  color: rgb(188, 190, 190);
-}
-
-.LocationList {
-  height: 100%;
-  flex: 1;
-  outline: none;
-  contain: strict;
-}
-
-/* TODO figure out if this css is too slow */
-.LocationsList:focus .TreeItem.Focused {
-  color: white;
-}
-/*************/
-/* ViewletProblems.css */
-/*************/
-.Viewlet[data-viewlet-id='Problems'] {
-  color: white;
-}
-/*************/
-/* ViewletOutput.css */
-/*************/
-.Viewlet[data-viewlet-id='Output']:focus {
-  outline: 1px solid red;
-  outline-offset: -1px;
-}
-
-.ViewletOutput {
-  white-space: pre;
-  overflow-y: scroll;
-  color: white;
-}
-
-.OutputContent:empty::before {
-  content: '(empty file)';
-  opacity: 0.3;
-}
-/*************/
-/* ViewletExtensions.css */
-/*************/
-/* progress bar based on the vscode progress bar https://github.com/microsoft/vscode/blob/main/src/vs/base/browser/ui/progressbar/progressbar.css */
-
-.Viewlet[data-viewlet-id='Extensions'] {
-  padding-top: 5px;
-  display: flex;
-  flex-direction: column;
-}
-
-/* .Viewlet[data-viewlet='Extensions']::before, */
-.Viewlet[data-viewlet='Extensions'][aria-busy='true']::before {
-  content: '';
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  animation: progress 4s linear infinite;
-  width: 2%;
-  height: 2px;
-  background: rgb(14, 112, 192);
-}
-
-/* TODO extract progress since it is used also elsewhere -> no copy paste code */
-@keyframes progress {
-  from {
-    transform: translateX(0%) scaleX(1);
-  }
-  50% {
-    transform: translateX(2500%) scaleX(3);
-  }
-  to {
-    transform: translateX(4900%) scaleX(1);
-  }
-}
-
-/* TODO use html element as placeholder so that it can be trimmed and has other size as input text */
-
-.ExtensionHeader {
-  display: grid;
-  padding: 5px 12px 6px 16px;
-}
-
-.ExtensionInput {
-  background-color: rgb(36, 41, 42);
-  color: rgb(225, 225, 225);
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgb(55, 65, 63);
-  padding: 2px 4px;
-  width: 100%;
-  font-size: 80%;
-  line-height: 100%;
-  height: 26px;
-}
-
-/* clears the 'X' from Chrome */
-.ExtensionInput::-webkit-search-decoration,
-.ExtensionInput::-webkit-search-cancel-button,
-.ExtensionInput::-webkit-search-results-button,
-.ExtensionInput::-webkit-search-results-decoration {
-  display: none;
-}
-
-.ViewletExtensionMessage {
-  color: rgb(188, 190, 190);
-  font-size: 13px;
-  padding: 5px 9px 5px 16px;
-}
-
-.ExtensionListWrapper {
-  flex: 1;
-  contain: strict;
-  position: relative;
-}
-
-.ExtensionList {
-  flex: 1;
-  contain: strict;
-  position: relative;
-
-  /* TODO investigate whether or not it makes sense to create another layer here */
-  /* transform: translate3d(0px, 0px, 0px);
-  will-change: top; */
-}
-
-.ExtensionListItem {
-  text-decoration: none;
-  padding: 0 1rem;
-  cursor: pointer;
-  display: flex;
-  gap: 14px;
-  height: 62px;
-  align-items: center;
-  contain: strict;
-  /* TODO use color from color theme */
-  color: rgb(188, 190, 190);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-
-.ExtensionListItem:hover {
-  background: rgba(64, 92, 80, 0.2);
-}
-
-.ExtensionListItem.Focused {
-  /* background: rgba(64, 92, 80, 0.2); */
-  background: #515f59;
-  color: white;
-}
-
-.ExtensionListItem[data-state='disabled'] {
-  color: #606363;
-}
-
-.ExtensionListItem[data-state='disabled'] .ExtensionIcon {
-  opacity: 0.5;
-}
-
-.ExtensionDetail {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  contain: strict;
-}
-
-.ExtensionIcon {
-  width: 42px;
-  height: 42px;
-  flex-shrink: 0;
-}
-
-.ExtensionName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  /* color: rgb(188, 190, 190); */
-  font-weight: 700;
-  font-size: 13px;
-  padding-right: 11px;
-}
-
-.ExtensionDescription {
-  height: 18px;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-right: 11px;
-}
-
-.ExtensionFooter {
-  display: flex;
-  justify-content: space-between;
-}
-
-.ExtensionAuthorName {
-  /* TODO compute automatically like vscode (opacity 0.9) */
-  /* const authorForeground = foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(theme));
-  collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled) .author { color: ${authorForeground}; }`);
-  const disabledExtensionForeground = foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(theme));
-  collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled { color: ${disabledExtensionForeground}; }`); */
-  /* color: #909593; */
-  font-size: 90%;
-  font-weight: 600;
-}
-
-.ExtensionActionInstall {
-  background: #2f6260;
-  color: white;
-  border: none;
-  cursor: inherit;
-  height: 16px;
-  line-height: 14px;
-  padding: 0 4px;
-  /* padding: 4px; */
-  /* contain: strict; */
-}
-
-.ExtensionActionInstall:hover {
-  background: #387674;
-}
-
-.ExtensionActionManage {
-  all: unset;
-  width: 16px;
-  height: 16px;
-  contain: strict;
-  background: #c5c5c5;
-  -webkit-mask: url(/f9b8874/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
-  mask: url(/f9b8874/icons/settings-gear.svg) 50% 50% / 16px no-repeat;
-}
-
-.NegativeMargin {
-  contain: strict;
-}
-/*************/
-/* ViewletExplorer.css */
-/*************/
-.ListItems {
-  user-select: none;
-}
-
-.ListItems.DropTarget {
-  background: darkblue;
-}
-
-.TreeItem {
-  cursor: pointer;
-  color: var(--TreeItemForeground, rgb(188, 190, 190));
-  padding-left: 11px;
-  display: flex;
-  gap: 4px;
-  height: 22px;
-  line-height: 22px;
-  contain: strict;
-  width: 100%;
-}
-
-/* .TreeItem:focus {
-  background: rgba(59, 71, 66, 0.5);
-} */
-
-.TreeItem.Focused {
-  background: rgba(59, 71, 66, 0.5);
-}
-
-/* TODO why need focused class when there is :focus ? */
-.Viewlet[data-viewlet-id='Explorer']:focus-within .TreeItem.Focused {
-  /* background: rgba(0, 0, 0, 0.3); */
-  /* background: rgba(59, 71, 66, 0.5); */
-  background: #515f59;
-}
-
-.TreeItem::before {
-  content: ' ';
-  contain: strict;
-  pointer-events: none;
-  background-size: 16px;
-  background-position: 0;
-  background-repeat: no-repeat;
-  width: 16px;
-  height: 22px;
-  display: inline-block;
-  flex-shrink: 0;
-}
-
-.TreeItem:hover {
-  background: rgba(64, 92, 80, 0.2);
-}
-
-/* .TreeItem.Hover {
-  background: rgba(64, 92, 80, 0.2);
-} */
-
-.TreeItem[aria-level='1'] {
-  padding-left: 1rem;
-}
-
-.TreeItem[aria-level='2'] {
-  padding-left: 2rem;
-}
-
-.TreeItem[aria-level='3'] {
-  padding-left: 3rem;
-}
-
-.TreeItem[aria-level='4'] {
-  padding-left: 4rem;
-}
-
-.TreeItem[aria-level='5'] {
-  padding-left: 5rem;
-}
-
-.TreeItem[aria-level='6'] {
-  padding-left: 6rem;
-}
-
-.TreeItem[aria-level='7'] {
-  padding-left: 7rem;
-}
-
-.TreeItem[aria-level='8'] {
-  padding-left: 8rem;
-}
-
-.TreeItem[aria-level='9'] {
-  padding-left: 9rem;
-}
-
-.TreeItem[aria-level='10'] {
-  padding-left: 10rem;
-}
-
-.TreeItem[aria-level='11'] {
-  padding-left: 11rem;
-}
-
-.TreeItem[aria-level='12'] {
-  padding-left: 12rem;
-}
-
-.TreeItem[aria-level='13'] {
-  padding-left: 13rem;
-}
-
-.TreeItem[aria-level='14'] {
-  padding-left: 14rem;
-}
-
-.TreeItem[aria-level='14'] {
-  padding-left: 14rem;
-}
-
-.TreeItem[aria-level='15'] {
-  padding-left: 15rem;
-}
-
-.TreeItem[aria-level='16'] {
-  padding-left: 16rem;
-}
-
-.TreeItem[aria-level='17'] {
-  padding-left: 17rem;
-}
-
-.TreeItem[aria-level='18'] {
-  padding-left: 18rem;
-}
-
-.TreeItem[aria-level='19'] {
-  padding-left: 19rem;
-}
-
-/* TODO support arbitrary depth */
-
-.TreeItem[aria-level='20'] {
-  padding-left: 20rem;
-}
-/*************/
-/* ViewletDebugConsole.css */
-/*************/
-.Viewlet[data-viewlet-id='DebugConsole'] {
-  color: white;
-}
-/*************/
-/* Viewlet.css */
-/*************/
-.Viewlet {
-  position: relative;
-  contain: strict;
-  width: 100%;
-  height: 100%;
-  /* overflow-y: auto; */
-}
-
-.ViewletError {
-  color: lightgray;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 1rem;
-  width: 100%;
-  text-align: center;
-}
-/*************/
-/* TitleBar.css */
-/*************/
-#TitleBar {
-  /* TODO should not need z index */
-  z-index: 1;
-  display: flex;
-  background: rgb(40, 46, 47);
-  background: var(--TitleBarBackground);
-  color: var(--TitleBarForeground, rgb(204, 204, 204));
-  -webkit-app-region: drag;
-  app-region: drag;
-}
-
-#TitleBarMenu {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  -webkit-app-region: no-drag;
-  app-region: no-drag;
-}
-
-.TitleBarTopLevelEntry {
-  height: 100%;
-  line-height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 5px;
-}
-
-.TitleBarTopLevelEntry[aria-expanded='true'],
-.TitleBarTopLevelEntry:focus,
-.TitleBarTopLevelEntry:hover {
-  background: var(--TitleBarItemHoverForeground, rgba(255, 255, 255, 0.1));
-}
-
-/* TODO maybe have extra focus outline border */
-/*
-:focus {
-  border: 2px solid green;
-} */
-/*************/
-/* StatusBar.css */
-/*************/
-#StatusBar {
-  display: flex;
-  justify-content: space-between;
-}
-
-#StatusBar {
-  background: var(--StatusBarBackground);
-  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;
-  box-sizing: border-box;
-}
-
-#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;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 1em;
-  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;
-}
-/*************/
-/* SideBar.css */
-/*************/
-#SideBar {
-  background: var(--SideBarBackground, rgb(30, 35, 36));
-  color: var(--SideBarForeground, white);
-  display: flex;
-  flex-direction: column;
-}
-
-#SideBarTitleArea {
-  contain: strict;
-  padding: 0 8px;
-  line-height: 35px;
-  display: grid;
-  height: 35px;
-  grid-template-columns: auto 1fr;
-}
-
-#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;
-}
-
-/* TODO */
-#SideBarTitleAreaButtons {
-  display: none;
-}
-
-#SideBarContent {
-  contain: strict;
-  /* padding: 10px; */
-  /* height: 100%; */
-  flex: 1;
-}
-/*************/
-/* QuickPick.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;
-  /* TODO is this useful? */
-  /* transform: translate3d(0, 0, 0); */
-  display: flex;
-  flex-direction: column;
-  row-gap: 4px;
-  pointer-events: all;
-  /* inset: 0; */
-  /* will-change: transform; */
-  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
-}
-
-#QuickPickHeader {
-  /* width: 100%; */
-  display: flex;
-  /* margin: 6px 6px 0; */
-  padding: 6px 6px 0;
-  /* contain: strict; */
-  height: 30px;
-  contain: strict;
-  /* margin-bottom: -2px; */
-}
-
-#QuickPickItems {
-  outline: 0;
-  overflow-y: auto;
-  /* height: 200px; */
-  max-height: 220px;
-  /* TODO not sure if that makes anything faster here */
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  /* contain: layout style paint; */
-}
-
-.ScrollWrapper {
-  width: 100%;
-  height: 220px;
-  /* TODO check if this makes a difference */
-  /* will-change: transform; needed for effective scrolling */
-  /* contain: strict; */
-  position: relative;
-  z-index: -1;
-}
-
-.Row {
-}
-
-.QuickPickItem {
-  display: flex;
-  /* column-gap: 1rem; */
-  /* padding: 0 6px 0 11px; */
-  white-space: nowrap;
-  /* height: 23px; */
-  /* contain: strict; */
-  align-items: center;
-
-  width: 100%;
-  height: 22px;
-  font-size: 13px;
-  contain: strict;
-  margin: 0;
-  padding: 0;
-  /* position: absolute; */
-  padding: 0 6px;
-  contain: strict;
-}
-
-.QuickPickItem:hover {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
-
-.QuickPickItem.Focused {
-  color: var(--ListActiveSelectionForeground);
-  background: var(--ListActiveSelectionBackground);
-}
-
-.QuickPickItemLabel {
-  /* pointer-events: none; */
-  font-size: 13px;
-}
-
-.QuickPickItemDescription {
-  font-size: 0.8rem;
-  opacity: 0.7;
-  pointer-events: none;
-}
-
-#QuickPickCount {
-  /* Screen Reader Only */
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
-/* TODO don't do nesting */
-.QuickPickItem .highlight {
-  color: darkgoldenrod;
-}
-
-/* TODO different way to check if it is file, className may be faster  */
-.QuickPickItem[data-language-id]::before {
-  content: ' ';
-  contain: strict;
-  width: 22px;
-  height: 22px;
-  background-size: 16px;
-  background-position: 0;
-  background-repeat: no-repeat;
-  padding-right: 6px;
-  width: 16px;
-  height: 22px;
-  line-height: inherit !important;
-  display: inline-block;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  vertical-align: top;
-  flex-shrink: 0;
-  background-size: cover;
-  background-size: 16px;
-  background-position: 0;
-}
-/*************/
-/* Panel.css */
-/*************/
-#Panel {
-  display: grid;
-  grid-template-rows: 35px 1fr;
-  border-top: 1px solid rgba(128, 128, 128, 0.35);
-  background: var(--PanelBackground);
-}
-
-#PanelHeader {
-  contain: strict;
-}
-
-#PanelTabs {
-  display: flex;
-  gap: 1rem;
-  height: 100%;
-}
-
-.PanelTab {
-  cursor: pointer;
-  font-size: 11px;
-  font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
-  text-transform: uppercase;
-  height: 100%;
-  line-height: 35px;
-  /* color: rgba(231, 231, 231, 0.6); */
-  color: var(--PanelTabForeground);
-}
-
-.PanelTab[aria-selected] {
-  /* color: rgb(231, 231, 231); */
-  color: var(--PanelTabActiveForeground);
-  border-bottom-color: rgb(231, 231, 231);
-}
-
-.PanelTab:hover {
-  color: var(--PanelTabHoverForeground);
-}
-
-#PanelContent {
-  contain: strict;
-}
-/*************/
-/* 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;
-}
-/*************/
-/* MonacoList.css */
-/*************/
-.MonacoList {
-}
-
-.ListItem {
-}
-
-.ListItems {
-  height: 22px;
-  line-height: 22px;
-  font-size: 14px;
-  contain: strict;
-}
-/*************/
-/* 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%;
-  }
-}
-/*************/
-/* Menu.css */
-/*************/
-/* TODO very much copy paste from ContextMenu.css */
-
-.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) 0px 2px 4px);
-  user-select: none;
-  min-width: 150px;
-  /* width: 150px; */
-  margin: 0;
-  padding: 10px 0;
-  font-size: 13px;
-  z-index: 1;
-  outline: none;
-  pointer-events: auto;
-}
-
-.MenuItem {
-  /* border: thin solid transparent; */
-  /* TODO using px and rem -> decide */
-  height: 28px;
-  padding: 0 28px;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  list-style: none;
-  position: relative;
-  outline: none;
-  display: flex;
-  contain: content;
-}
-
-.MenuItem.Focused {
-  background: var(--MenuItemHoverBackground, #687f7b33);
-  color: var(--MenuItemHoverForeground, inherit);
-  outline: none;
-}
-
-.MenuItem[aria-checked='true']::before {
-  content: '';
-  position: absolute;
-  top: calc((1.8rem - 0.75rem) / 2);
-  left: calc((1.8rem - 0.75rem) / 2);
-  width: 0.75rem;
-  height: 0.75rem;
-  background: orchid;
-  -webkit-mask-image: url(/f9b8874/icons/check.svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 0.75rem;
-  mask-size: 0.75rem;
-  background: currentColor;
-}
-
-.MenuItem[aria-haspopup='true']::after {
-  width: 16px;
-  height: 16px;
-  content: '';
-  display: block;
-  -webkit-mask-image: url(/f9b8874/icons/chevron-right.svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  background: currentColor;
-  margin-left: auto;
-  margin-right: -20px;
-}
-
-.MenuItem[disabled] {
-  opacity: 0.4;
-}
-
-.MenuItemSeparator {
-  list-style: none;
-  height: 16px;
-  position: relative;
-}
-
-.MenuItemSeparator::after {
-  position: absolute;
-  content: '';
-  display: block;
-  width: calc(100% - 1.6rem);
-  height: 1px;
-  background: rgb(136, 136, 136);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-/*************/
-/* Main.css */
-/*************/
-#Main {
-  background: var(--MainBackground);
-  display: flex;
-  flex-direction: column;
-}
-
-#MainContent {
-  contain: strict;
-  flex: 1;
-}
-
-.Viewlet[data-viewlet-id='EditorText'] {
-  color: white;
-  white-space: pre;
-}
-
-.Viewlet[data-viewlet-id='EditorImage'] {
-  max-width: 100%;
-}
-
-.Viewlet[data-viewlet-id='Clock'] {
-  color: white;
-}
-/*************/
-/* Layout.css */
-/*************/
-.SashHorizontal,
-.SashVertical {
-  position: fixed;
-  contain: strict;
-}
-
-.SashHorizontal {
-  height: 4px;
-  cursor: row-resize;
-}
-
-.SashVertical {
-  width: 4px;
-  cursor: col-resize;
-}
-/*************/
-/* InputBox.css */
-/*************/
-.InputBox {
-  width: 100%;
-  margin: 0;
-  border: none;
-  outline: none;
-  flex: 1;
-  background: var(--InputBoxBackground);
-  border: 1px solid rgb(55, 65, 63);
-  padding: 4px;
-  color: var(--InputBoxForeground);
-  font-size: 13px;
-  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;
-}
-/*************/
-/* ImagePreview.css */
-/*************/
-.ImagePreview {
-  pointer-events: all;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 170px;
-  margin: 0;
-  background: white;
-  display: flex;
-  flex-direction: column;
-  padding: 3px;
-}
-
-.ImagePreview::before {
-  content: '';
-  width: 0;
-  height: 0;
-  border-top: 11px solid transparent;
-  border-bottom: 11px solid transparent;
-  display: block;
-  border-left: 11px solid white;
-  position: absolute;
-  right: 0;
-  top: 22px;
-  right: -11px;
-}
-
-.ImagePreviewImage {
-  min-height: 40px;
-  max-width: 100%;
-  max-height: 100%;
-  background: transparent;
-  background-position: 0 0, 10px 10px;
-  background-size: 20px 20px;
-  background-image: linear-gradient(
-      45deg,
-      #ccc 25%,
-      transparent 25%,
-      transparent 75%,
-      #ccc 75%,
-      #ccc
-    ),
-    linear-gradient(
-      45deg,
-      #ccc 25%,
-      transparent 25%,
-      transparent 75%,
-      #ccc 75%,
-      #ccc
-    );
-}
-
-.ImagePreviewCaption {
-  height: 20px;
-  color: gray;
-  text-align: center;
-  font-size: 10px;
-  line-height: 20px;
-}
-/*************/
-/* Highlight.css */
-/*************/
-@keyframes highlight {
-  0% {
-    outline-color: #3d5252;
-  }
-  100% {
-    outline-color: transparent;
-  }
-}
-
-.Highlight {
-  outline: 1px solid;
-  outline-offset: -1px;
-  animation: highlight 1s;
-  /* animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); */
-  animation-timing-function: ease-in;
-}
-/*************/
-/* Focus.css */
-/*************/
-/* TODO hide outline on click */
-
-/* [tabindex='0']:focus-visible,
-[tabindex='0']:focus,
-[tabindex='-1']:focus-visible {
-  outline: var(--FocusOutline);
-  outline-offset: -1px;
-  outline-style: solid;
-  outline-width: 1px;
-} */
-
-* {
-  outline: none;
-}
-
-.InputBox:focus {
-  border-color: var(--FocusOutline);
-}
-
-.FocusOutline {
-  outline: var(--FocusOutline);
-  outline-offset: -1px;
-  outline-style: solid;
-  outline-width: 1px;
-}
-/*************/
-/* FindWidget.css */
-/*************/
-.FindWidget {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-}
-
-.FindWidgetInput {
-  /* background: transparent; */
-  background: darkgray;
-  color: white;
-}
-/*************/
-/* 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 */
-  /* TODO investigate perf */
-  /* contain: children; */
-  /* transform: translate3d(0, 0, 0); */
-}
-
-.MainTab {
-  border-right: 1px solid rgb(34, 34, 34);
-  background: var(--TabBackground);
-  color: var(--TabForeground);
-  padding-left: 5px;
-  padding-right: 5px;
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  white-space: nowrap;
-  /* contain: content; */
-}
-
-.MainTab[aria-selected='true'] {
-  border-right: 1px solid rgb(34, 34, 34);
-  background: var(--TabActiveBackground);
-  color: var(--TabActiveForeground);
-}
-
-/* should be kept in sync with explorer */
-.MainTab::before {
-  content: ' ';
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  padding-right: 4px;
-  background-repeat: no-repeat;
-  line-height: inherit;
-  margin-top: -3px; /* TODO why this? */
-}
-
-.MainTab::before {
-  content: ' ';
-  contain: strict;
-  width: 22px;
-  height: 22px;
-  background-size: 16px;
-  background-position: 0;
-  background-repeat: no-repeat;
-  padding-right: 6px;
-  width: 16px;
-  height: 22px;
-  line-height: inherit !important;
-  display: inline-block;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  flex-shrink: 0;
-  background-size: cover;
-  background-size: 16px;
-  background-position: 0;
-}
-
-.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;
-}
-
-.EditorTabCloseButton::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--TabActiveForeground);
-  -webkit-mask-image: url(/f9b8874/icons/icon-close.svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 50%;
-  mask-size: 50%;
-}
-
-.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;
-  -webkit-mask: url(/packages/renderer-process/assets/icons/circle-filled.svg)
-    100% 50% / 15px no-repeat;
-}
-/*************/
-/* EditorHover.css */
-/*************/
-#EditorHover {
-  top: 0;
-  left: 0;
-  position: absolute;
-  background: lightblue;
-}
-/*************/
-/* EditorCompletion.css */
-/*************/
-#Completions {
-  top: 0;
-  left: 0;
-  position: absolute;
-  background: var(--ContextMenuBackground);
-  color: white;
-  box-shadow: rgb(0, 0, 0) 0px 2px 4px;
-  user-select: none;
-  width: 150px;
-  margin: 0;
-  /* padding: 0.5rem 0; */
-  font-size: 13px;
-  height: 150px;
-  padding: 0;
-  overflow-y: auto;
-  /* z-index: 1; */
-  pointer-events: all;
-}
-
-.EditorCompletionItem {
-  height: 28px;
-  padding: 0 28px;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  list-style: none;
-  cursor: pointer;
-  position: relative;
-  contain: strict;
-}
-
-.EditorCompletionItem:before {
-  content: '';
-  width: 20px;
-  height: 20px;
-  /* background: darkcyan; */
-  contain: strict;
-  content: '';
-  position: absolute;
-  inset: 0;
-  /* -webkit-mask-image: url(/f9b8874/icons/icon-close.svg); */
-  /* -webkit-mask-repeat: no-repeat; */
-  /* mask-repeat: no-repeat; */
-  /* -webkit-mask-position: center; */
-  /* mask-position: center; */
-  /* -webkit-mask-size: 100%; */
-  /* mask-size: 100%; */
-}
-
-.IconProperty::before {
-  -webkit-mask-image: url(/f9b8874/icons/symbol-property.svg);
-  background: #c5c5c5;
-}
-
-.IconValue::before {
-  -webkit-mask-image: url(/f9b8874/icons/symbol-enum.svg);
-  background: #ee9d28;
-}
-
-.IconVariable::before {
-  -webkit-mask-image: url(/f9b8874/icons/symbol-variable.svg);
-  background: #75beff;
-}
-
-.IconFunction::before {
-  -webkit-mask-image: url(/f9b8874/icons/symbol-method.svg);
-  background: #b180d7;
-}
-
-.IconKeyword::before {
-  -webkit-mask-image: url(/f9b8874/icons/symbol-keyword.svg);
-  background: #c5c5c5;
-}
-
-.EditorCompletionItem:hover {
-  background: rgba(64, 92, 80, 0.2);
-}
-
-.EditorCompletionItem.Focused {
-  background: #405c50;
-}
-
-/* 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;
-}
-
-/* Alert  */
-.AriaAlert {
-  position: absolute;
-  left: -999em;
-  top: 0;
-}
-
-.monaco-aria-container {
-  width: 0;
-  height: 0;
-}
-/*************/
-/* Editor.css */
-/*************/
-/* TODO this should not be global */
-.Editor {
-  width: 100%;
-  height: 100%;
-  background: var(--MainBackground);
-  color: white;
-  outline: none;
-  border: none;
-  font-family: 'Fira Code', monospace;
-  position: relative;
-  white-space: pre;
-  font-size: var(--EditorFontSize);
-  letter-spacing: var(--EditorLetterSpacing);
-  contain: strict;
-  tab-size: 2;
-  font-display: block;
-}
-
-.EditorLayers {
-  contain: strict;
-  /* contain: content; */
-  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;
-  /* border-color: #a8df5a; */
-}
-
-.EditorDiagnostic {
-  position: absolute;
-  top: 0;
-  left: 0;
-  contain: strict;
-  pointer-events: none;
-}
-
-.EditorDiagnostic {
-  /* background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2F…%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
-    repeat-x bottom left; */
-
-  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23b64e4e'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
-    repeat-x bottom left;
-}
-
-.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;
-}
-
-.ScrollBar,
-.ScrollBarSmall {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 14px;
-  bottom: 0;
-  contain: strict;
-}
-
-.ScrollBarSmall {
-  width: 10px;
-}
-
-.ScrollBarThumb {
-  width: 100%;
-  /* height: 40px; */
-  position: absolute;
-  contain: strict;
-  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
-}
-
-.LayerCursor {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-/* ::highlight(cursor) {
-  background-color: #31e0e0;
-  color: blue;
-} */
-
-.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;
-}
-/*************/
-/* Dialog.css */
-/*************/
-#Dialog {
-  pointer-events: all;
-  user-select: text;
-  padding: 0;
-  width: 90%;
-  height: 65%;
-  display: flex;
-  flex-direction: column;
-}
-
-#Dialog::backdrop {
-  background: rgba(0, 0, 0, 0.25);
-}
-
-#DialogTitle {
-  background: #ecf0f1;
-  color: #484b4c;
-  padding: 1rem;
-  margin: 0;
-}
-
-#DialogBody {
-  padding: 1rem;
-  contain: strict;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-#DialogBodyErrorMessage {
-  margin: 0;
-}
-
-#DialogBodyErrorCodeFrame {
-  white-space: pre;
-}
-
-#DialogBodyErrorStack {
-  white-space: pre-wrap;
-  max-width: 100%;
-  overflow-x: auto;
-}
-/*************/
-/* 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;
-}
-/*************/
-/* BackDrop.css */
-/*************/
-#BackDrop {
-  position: fixed;
-  cursor: initial;
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: all;
-}
-/*************/
-/* Animation.css */
-/*************/
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.AnimationSpin {
-  animation: spin 2s linear infinite;
-}
-/*************/
-/* ActivityBar.css */
-/*************/
-#ActivityBar {
-  background: var(--ActivityBarBackground);
-  color: var(--ActivityBarForeground);
-  contain: strict;
-}
-
-#ActivityBar {
-  /* display: grid; */
-  /* align-content: space-between; */
-  display: flex;
-  flex-direction: column;
-}
-
-/* #ActivityBar:focus-within {
-  border: 1px solid rgba(62, 100, 170, 0.575);
-} */
-
-/* #ActivityBarItemsTop,
-#ActivityBarItemsBottom {
-  contain: content;
-  display: grid;
-  grid-auto-rows: 48px;
-} */
-
-.ActivityBarItem {
-  position: relative;
-  outline: none;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 24px;
-  mask-size: 24px;
-  /* background: var(--ActivityBarBackground); */
-  position: relative;
-  width: 48px;
-  height: 48px;
-  contain: strict;
-  /* margin-top: 100px; */
-  flex-shrink: 0;
-}
-
-.ActivityBarItem[data-viewlet-id='Settings'] {
-  margin-top: auto;
-}
-
-.ActivityBarItem:hover {
-  /* background: #878f8c; */
-}
-
-.ActivityBarItem[aria-selected='true'],
-.ActivityBarItem:hover {
-  color: var(--ActivityBarActiveForeground);
-}
-
-.ActivityBarItem[aria-selected='true'] {
-  background: var(--ActivityBarActiveBackground);
-}
-
-.ActivityBarItem:focus-visible {
-  /* background: var(--ActivityBarActiveBackground); */
-  color: var(--ActivityBarActiveForeground);
-}
-
-.ActivityBarItemIcon {
-  position: absolute;
-  inset: 0;
-  background: currentColor;
-  /* filter: 1; */
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 24px;
-  mask-size: 24px;
-}
-
-/* .ActivityBarItem:focus .ActivityBarItemIcon,
-.ActivityBarItem:hover .ActivityBarItemIcon,
-.ActivityBarItem[aria-selected] .ActivityBarItemIcon {
-  filter: none;
-} */
-
-.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;
-}