/*! modern-normalize v2.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. */
	-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
	tab-size: 4; /* 3 */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
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 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.
*/

button,
select {
	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;
}

.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;
}

/*************/
/* __Theme.css */
/*************/
:root {
  /* TODO sizes is not theme */
  --EditorFontSize: 16px;
  --EditorLineHeight: 20px;
  --EditorFontFamily: 'Fira Code', monospace;
}
/*************/
/* _Global.css */
/*************/
@font-face {
  font-family: 'Fira Code';
  src: url(/4159d29/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);
}

.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);
}

.Hidden {
  display: none !important;
}

/* TODO remove items from dom instead of hiding them with css */
[hidden] {
  display: none !important;
}

/*
 * 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; */
}
/*************/
/* AriaAlert.css */
/*************/
/* Alert  */
.AriaAlert {
  position: absolute;
  left: -999em;
  top: 0;
}

.AriaContainer {
  width: 0;
  height: 0;
}
/*************/
/* 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;
  /* width: 150px; */
  margin: 0;
  padding: 4px 0;
  font-size: 13px;
  z-index: 1;
  outline: none;
  pointer-events: auto;
  border-radius: 5px;
}

.MenuItem {
  /* border: thin solid transparent; */
  /* TODO using px and rem -> decide */
  height: 26px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  outline: none;
  display: flex;
  contain: content;
  margin: 0 4px;
  border-radius: 4px;
}

.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(/4159d29/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(/4159d29/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 {
  height: 11px;
  position: relative;
  contain: strict;
}

.MenuItemSeparator::after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--MenuItemSeparatorBackground, #606060);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
/*************/
/* 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;
}
/*************/
/* ViewletLayout.css */
/*************/
.SashHorizontal,
.SashVertical {
  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;
}

.SashVerticalContent,
.SashHorizontalContent {
  background: #444444;
}

.SashVerticalContent {
  width: 1px;
  height: 100%;
}

.SashHorizontalContent {
  width: 100%;
  height: 1px;
}
/*************/
/* 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;
}
/*************/
/* 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;
}
/*************/
/* Widgets.css */
/*************/
#Widgets {
  contain: strict;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* TODO maybe hide widgets container if empty*/
#Widgets:empty {
  display: none;
}
/*************/
/* 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%;
  }
}
/*************/
/* BackDrop.css */
/*************/
.BackDrop {
  position: fixed;
  cursor: initial;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: all;
}
/*************/
/* 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, lightgray);
}

.FocusOutline {
  outline-color: var(--FocusOutline, lightgray);
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
}
/*************/
/* Actions.css */
/*************/
.Actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  contain: content;
}

.SelectWrapper {
  contain: content;
  position: relative;
  height: 21px;
}

.Select {
  appearance: none;
  background: transparent;
  contain: content;
  color: inherit;
  padding: 2px 23px 2px 8px;
  background: var(--DropDownBackground, #3c3c3c);
  color: var(--DropDownForeground, #f0f0f0);
  border: var(--DropDownBorder);
  height: 100%;
}

.SelectIcon {
  position: absolute;
  inset: 0 6px 0 auto;
  background: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: var(--MaskIconSize);
  -webkit-mask-size: var(--MaskIconSize);
  mask-position: 50% 50%;
  -webkit-mask-position: 50% 50%;
  mask-image: url(/4159d29/icons/chevron-down.svg);
  -webkit-mask-image: url(/4159d29/icons/chevron-down.svg);
  pointer-events: none;
  width: 16px;
  height: 16px;
  contain: strict;
  margin: auto 0;
}
/*************/
/* Badge.css */
/*************/
.Badge {
  contain: strict;
  font-size: 11px;
  font-weight: 400;
  min-height: 18px;
  min-width: 18px;
  line-height: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.BadgeContent {
  contain: content;
  background: var(--BadgeBackground, rgb(160, 63, 155));
  color: var(--BadgeForeground, #eeeeee);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 400;
  height: 18px;
  width: 18px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  --MaskIconSize: 14px;
}
/*************/
/* 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 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 rgb(34, 34, 34);
  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;
}

.EditorTabCloseButton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--TabActiveForeground);
  -webkit-mask-image: url(/4159d29/icons/icon-close.svg);
  mask-image: url(/4159d29/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%;
}

.Circle {
  position: relative;
  width: 23px;
  height: 23px;
  contain: strict;
  flex-shrink: 0;
}

.TabDirtyIcon {
  -webkit-mask-image: url(/4159d29/icons/circle-filled.svg);
  mask-image: url(/4159d29/icons/circle-filled.svg);
}

.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;
}

.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;
}
/*************/
/* FileIcon.css */
/*************/
.FileIcon {
  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;
  align-items: center;
}
/*************/
/* Highlight.css */
/*************/
.Highlight {
  background: rgba(129, 85, 14, 0.4);
  contain: content;
}

.HighlightInserted {
  background: rgba(156, 204, 44, 0.2);
  text-decoration: none;
  border: 1px solid rgba(155, 185, 85, 0.2);
  contain: content;
}

.HighlightDeleted {
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.2);
  contain: content;
  text-decoration: line-through;
}
/*************/
/* IconButton.css */
/*************/
.IconButton {
  width: 22px;
  height: 22px;
  contain: strict;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #c5c5c5;
  border-radius: 5px;
}

.IconButton[disabled] {
  color: rgba(204, 204, 204, 0.5);
}

.IconButton:enabled:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}

.IconButton:focus-visible {
  outline: 1px solid #3d5252;
  outline-offset: -1px;
}
/*************/
/* 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;
  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;
}
/*************/
/* Label.css */
/*************/
.Label {
  white-space: nowrap;
  contain: content;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.LabelDetail {
  font-size: 0.9em;
  opacity: 0.7;
  contain: content;
  margin-left: 4px;
}

.StrikeThrough {
  text-decoration: line-through;
}
/*************/
/* MaskIcon.css */
/*************/
.MaskIcon {
  display: block;
  position: absolute;
  inset: 0;
  background: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: var(--MaskIconSize);
  -webkit-mask-size: var(--MaskIconSize);
  mask-position: 50% 50%;
  -webkit-mask-position: 50% 50%;
  pointer-events: none;
}
/*************/
/* ScrollBar.css */
/*************/
.ScrollBarThumb,
.ScrollBarThumbVertical,
.ScrollBarThumbHorizontal {
  width: 100%;
  /* height: 40px; */
  position: absolute;
  contain: strict;
  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
}

.ScrollBarThumbHorizontal {
  height: 100%;
  width: auto;
}

.ScrollBar,
.ScrollBarVertical,
.ScrollBarHorizontal,
.ScrollBarHorizontalSmall,
.ScrollBarSmall {
  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;
}

.ScrollBarSmall {
  width: 10px;
}
/*************/
/* TreeItem.css */
/*************/
.TreeItem {
  color: var(--TreeItemForeground, rgb(188, 190, 190));
  padding-left: 11px;
  padding-right: 12px;
  display: flex;
  gap: 4px;
  height: 22px;
  line-height: 22px;
  contain: strict;
  width: 100%;
  align-items: center;
}

/* .TreeItem:focus {
  background: rgba(59, 71, 66, 0.5);
} */

#TreeItemActive {
  background: var(--TreeItemActiveBackground, rgba(59, 71, 66, 0.5));
}

.TreeItem:hover {
  background: var(--TreeItemHoverBackground, rgba(64, 92, 80, 0.2));
}

.SourceControlItems {
}
/*************/
/* ViewletActivityBar.css */
/*************/
.ActivityBar {
  color: var(--ActivityBarForeground);
}

.ActivityBar {
  /* display: grid; */
  /* align-content: space-between; */
  display: flex;
  flex-direction: column;
}

.ActivityBarItem {
  position: relative;
  outline: none;
  width: 48px;
  height: 48px;
  contain: strict;
  flex-shrink: 0;
  --MaskIconSize: 24px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: var(--MaskIconSize);
  -webkit-mask-size: var(--MaskIconSize);
  mask-position: 50% 50%;
  -webkit-mask-position: 50% 50%;
  background: currentColor;
}

.ActivityBarItem[title='Settings'] {
  margin-top: auto;
}

.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);
}

/* .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;
}
/*************/
/* 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: 400;
  position: absolute;
}

.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;
}

.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;
}

.LayerCursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.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;
}
/*************/
/* ViewletExplorer.css */
/*************/
:root {
  --DropTargetBackground: #062f4a;
}

.ListItems {
  user-select: none;
}

.DropTarget {
  background: var(--DropTargetBackground);
}
/*************/
/* 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;
  /* 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);
}

.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;
  white-space: nowrap;
  align-items: center;
  width: 100%;
  height: 22px;
  font-size: 13px;
  margin: 0;
  padding: 0 6px;
  contain: strict;
  gap: 4px;
  line-height: 22px;
  border-radius: 3px;
}

.QuickPickItem:hover {
  background: var(--ListHoverBackground);
  color: var(--ListHoverForeground);
}

.QuickPickItemActive {
  /* TODO avoid using important */
  color: var(--ListActiveSelectionForeground) !important;
  background: var(--ListActiveSelectionBackground) !important;
}

/* TODO avoid nesting */
.QuickPickItemActive .QuickPickItemDescription {
  color: color-mix(in oklab, var(--ListActiveSelectionForeground), var(--ListActiveSelectionBackground) 30%);
}

.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;
}

.QuickPickItem [class^='Icon'] {
  contain: strict;
  pointer-events: none;
  background-size: 16px;
  background-position: 0;
  background-repeat: no-repeat;
  width: 16px;
  height: 22px;
  flex-shrink: 0;
}

/* TODO remove icon from dom when it is not needed */
.Iconundefined {
  display: none;
}

.QuickPickLabel {
  white-space: nowrap;
  contain: content;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* TODO reuse same highlight css for completions */
.QuickPickHighlight {
  color: var(--CompletionHighlightForeground, #e1b974);
  font-weight: 700;
  contain: content;
}

.QuickPickItem .Label {
  flex: initial;
}
/*************/
/* 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;
}

.SideBarContent {
  contain: strict;
  /* padding: 10px; */
  /* height: 100%; */
  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;
  -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;
}
/*************/
/* ViewletTitleBar.css */
/*************/
.TitleBar {
  /* TODO should not need z index */
  z-index: 1;
  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: no-drag;
  flex: initial;
  width: 138px;
  contain: strict;
}

.TitleBarButton {
  width: 46px;
  height: 100%;
  contain: strict;
  background: transparent;
  border: none;
  color: currentColor;
}

.TitleBarButton:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}

.TitleBarButtonClose:hover {
  background-color: rgba(232, 17, 35, 0.9);
  color: var(--TitleBarButtonCloseHoverForeground, currentColor);
}

.MaskIcon.Minimize {
  -webkit-mask-image: url(/4159d29/icons/chrome-minimize.svg);
  mask-image: url(/4159d29/icons/chrome-minimize.svg);
}

.MaskIcon.Maximize {
  -webkit-mask-image: url(/4159d29/icons/chrome-maximize.svg);
  mask-image: url(/4159d29/icons/chrome-maximize.svg);
}

.MaskIcon.Restore {
  -webkit-mask-image: url(/4159d29/icons/chrome-restore.svg);
  mask-image: url(/4159d29/icons/chrome-restore.svg);
}

.MaskIcon.Close {
  -webkit-mask-image: url(/4159d29/icons/chrome-close.svg);
  mask-image: url(/4159d29/icons/chrome-close.svg);
}
/*************/
/* ViewletTitleBarIcon.css */
/*************/
.TitleBarIcon {
  background-image: url(/4159d29/icons/icon.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px;
  contain: strict;
  flex-basis: 30px;
  flex-grow: 0;
  flex-shrink: 0;
  height: 100%;
  width: 30px;
}
/*************/
/* ViewletTitleBarMenuBar.css */
/*************/
.TitleBarMenuBar {
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  contain: content;
  flex-grow: 0;
}

.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;
} */
