/*! 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(/extension-search-view/e6ddf2e/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(/extension-search-view/e6ddf2e/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;
}
/*************/
/* CompletionItem.css */
/*************/
.CompletionItem {
  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 */
.CompletionItemHighlight {
  color: var(--CompletionHighlightForeground, #e1b974);
  font-weight: 700;
  contain: content;
}

.CompletionItem:where(:hover) {
  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
}

.CompletionItemFocused {
  background: var(--CompletionListItemActiveBackground, #405c50);
  color: var(--CompletionListItemActiveForeground);
}

.CompletionItemDeprecated {
  text-decoration: line-through;
}
/*************/
/* 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;
}

.TabDragHighlight {
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  contain: strict;
  background: dodgerblue;
}
/*************/
/* ExplorerInputBox.css */
/*************/
:root {
  --ErrorBackground: #5a1d1d;
  --ErrorForeground: rgb(156, 162, 160);
  --InputValidationErrorBorder: #be1100;
  --DisabledForeground: rgba(204, 204, 204, 0.5);
}

.ExplorerInputBox {
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  flex: 1;
  background: var(--InputBoxBackground);
  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
  padding: 0;
  color: var(--InputBoxForeground);
  font-size: 13px;
  height: 22px;
  contain: strict;
}

.ExplorerInputBox::placeholder {
  color: var(--InputBoxPlaceholderForeground, rgba(255, 255, 255, 0.3));
}

.ExplorerInputBox:where(:focus) {
  border-color: var(--FocusOutline, lightgray);
}

.InputValidationError {
  border-color: var(--InputValidationErrorBorder);
}

.ExplorerErrorMessage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--ErrorBackground);
  color: var(--ErrorForeground);
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid var(--InputValidationErrorBorder);
  line-height: 20px;
  contain: content;
}
/*************/
/* 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;
}

.LabelCut {
  opacity: 0.5;
}
/*************/
/* 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(/extension-search-view/e6ddf2e/icons/chrome-minimize.svg);
}

.MaskIconMaximize,
.IconMaximize {
  mask-image: url(/extension-search-view/e6ddf2e/icons/chrome-maximize.svg);
}

.MaskIconRestore,
.IconRestore {
  mask-image: url(/extension-search-view/e6ddf2e/icons/chrome-restore.svg);
}

.MaskIconPlay,
.IconPlay {
  mask-image: url(/extension-search-view/e6ddf2e/icons/play.svg);
}

.MaskIconChromeClose,
.IconChromeClose {
  mask-image: url(/extension-search-view/e6ddf2e/icons/chrome-close.svg);
}

.MaskIconFiles,
.IconFiles {
  mask-image: url(/extension-search-view/e6ddf2e/icons/files.svg);
}

.MaskIconSearch,
.IconSearch {
  mask-image: url(/extension-search-view/e6ddf2e/icons/search.svg);
}

.MaskIconSourceControl,
.IconSourceControl {
  mask-image: url(/extension-search-view/e6ddf2e/icons/source-control.svg);
}

.MaskIconDebugAlt2,
.IconDebugAlt2 {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-alt-2.svg);
}

.MaskIconExtensions,
.IconExtensions {
  mask-image: url(/extension-search-view/e6ddf2e/icons/extensions.svg);
}

.MaskIconSettingsGear,
.IconSettingsGear {
  mask-image: url(/extension-search-view/e6ddf2e/icons/settings-gear.svg);
}

.MaskIconEllipsis,
.IconEllipsis {
  mask-image: url(/extension-search-view/e6ddf2e/icons/ellipsis.svg);
}

.MaskIconArrowDown,
.IconArrowDown {
  mask-image: url(/extension-search-view/e6ddf2e/icons/arrow-down.svg);
}

.MaskIconArrowUp,
.IconArrowUp {
  mask-image: url(/extension-search-view/e6ddf2e/icons/arrow-up.svg);
}

.MaskIconClose,
.IconClose,
.EditorTabCloseButton:hover .MaskIconCircleFilled,
.IconCircleFilled {
  mask-image: url(/extension-search-view/e6ddf2e/icons/close.svg);
}

.MaskIconCaseSensitive,
.IconCaseSensitive {
  mask-image: url(/extension-search-view/e6ddf2e/icons/case-sensitive.svg);
}

.MaskIconWholeWord,
.IconWholeWord {
  mask-image: url(/extension-search-view/e6ddf2e/icons/whole-word.svg);
}

.MaskIconRegex,
.IconRegex {
  mask-image: url(/extension-search-view/e6ddf2e/icons/regex.svg);
}

.MaskIconChevronRight,
.IconChevronRight {
  mask-image: url(/extension-search-view/e6ddf2e/icons/chevron-right.svg);
}

.MaskIconChevronDown,
.IconChevronDown {
  mask-image: url(/extension-search-view/e6ddf2e/icons/chevron-down.svg);
}

.MaskIconRefresh,
.IconRefresh {
  mask-image: url(/extension-search-view/e6ddf2e/icons/refresh.svg);
}

.MaskIconClearAll,
.IconClearAll {
  mask-image: url(/extension-search-view/e6ddf2e/icons/clear-all.svg);
}

.MaskIconCloud {
  mask-image: url(/extension-search-view/e6ddf2e/icons/cloud.svg);
}

.MaskIconTag {
  mask-image: url(/extension-search-view/e6ddf2e/icons/tag.svg);
}

.MaskIconNewFile,
.IconNewFile {
  mask-image: url(/extension-search-view/e6ddf2e/icons/new-file.svg);
}

.MaskIconNewFolder,
.IconNewFolder {
  mask-image: url(/extension-search-view/e6ddf2e/icons/new-folder.svg);
}

.MaskIconListFlat,
.IconListFlat {
  mask-image: url(/extension-search-view/e6ddf2e/icons/list-flat.svg);
}

.MaskIconCollapseAll,
.IconCollapseAll {
  mask-image: url(/extension-search-view/e6ddf2e/icons/collapse-all.svg);
}

.MaskIconFilter,
.IconFilter {
  mask-image: url(/extension-search-view/e6ddf2e/icons/filter.svg);
}

.MaskIconBlank,
.IconBlank {
  mask-image: url(/extension-search-view/e6ddf2e/icons/blank.svg);
}

.MaskIconCheck,
.IconCheck {
  mask-image: url(/extension-search-view/e6ddf2e/icons/check.svg);
}

.MaskIconEllipsis,
.IconEllipsis {
  mask-image: url(/extension-search-view/e6ddf2e/icons/ellipsis.svg);
}

.MaskIconBook,
.IconBook {
  mask-image: url(/extension-search-view/e6ddf2e/icons/book.svg);
}

.MaskIconAdd,
.IconAdd {
  mask-image: url(/extension-search-view/e6ddf2e/icons/add.svg);
}

.MaskIconTrash,
.IconTrash {
  mask-image: url(/extension-search-view/e6ddf2e/icons/trash.svg);
}

.MaskIconSplitHorizontal,
.IconSplitHorizontal {
  mask-image: url(/extension-search-view/e6ddf2e/icons/split-horizontal.svg);
}

.MaskIconReplace,
.IconReplace {
  mask-image: url(/extension-search-view/e6ddf2e/icons/replace.svg);
}

.MaskIconReplaceAll,
.IconReplaceAll {
  mask-image: url(/extension-search-view/e6ddf2e/icons/replace-all.svg);
}

.MaskIconChevronUp,
.IconChevronUp {
  mask-image: url(/extension-search-view/e6ddf2e/icons/chevron-up.svg);
}

.MaskIconArrowLeft,
.IconArrowLeft {
  mask-image: url(/extension-search-view/e6ddf2e/icons/arrow-left.svg);
}

.MaskIconArrowRight,
.IconArrowRight {
  mask-image: url(/extension-search-view/e6ddf2e/icons/arrow-right.svg);
}

.MaskIconLinkExternal,
.IconLinkExternal {
  mask-image: url(/extension-search-view/e6ddf2e/icons/link-external.svg);
}

.MaskIconExclude,
.IconExclude {
  mask-image: url(/extension-search-view/e6ddf2e/icons/exclude.svg);
}

.MaskIconGoToFile,
.IconGoToFile {
  mask-image: url(/extension-search-view/e6ddf2e/icons/go-to-file.svg);
}

.MaskIconDiscard,
.IconDiscard {
  mask-image: url(/extension-search-view/e6ddf2e/icons/discard.svg);
}

.MaskIconRemove,
.IconRemove {
  mask-image: url(/extension-search-view/e6ddf2e/icons/remove.svg);
}

.MaskIconError,
.IconError {
  mask-image: url(/extension-search-view/e6ddf2e/icons/error.svg);
}

.MaskIconCircleFilled,
.IconCircleFilled {
  mask-image: url(/extension-search-view/e6ddf2e/icons/circle-filled.svg);
}

.MaskIconInfo,
.IconInfo {
  mask-image: url(/extension-search-view/e6ddf2e/icons/info.svg);
}

.MaskIconSymbolValue,
.IconSymbolValue,
.MaskIconSymbolDefault,
.IconSymbolDefault {
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-enum.svg);
}

.MaskIconSymbolProperty,
.IconSymbolProperty {
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-property.svg);
}

.MaskIconSymbolFunction,
.IconSymbolFunction {
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-method.svg);
}

.MaskIconSymbolVariable,
.IconSymbolVariable {
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-variable.svg);
}

.MaskIconSymbolKeyword,
.IconSymbolKeyword {
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-keyword.svg);
}

.MaskIconSymbolField,
.IconSymbolField {
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-field.svg);
}

.MaskIconEdit,
.IconEdit {
  mask-image: url(/extension-search-view/e6ddf2e/icons/edit.svg);
}

.MaskIconSymbolFile,
.IconSymbolFile {
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-file.svg);
}

.MaskIconDebugPause {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-pause.svg);
}

.MaskIconDebugStepOver {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-step-over.svg);
}

.MaskIconDebugStepInto {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-step-into.svg);
}

.MaskIconDebugStepOut {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-step-out.svg);
}

.MaskIconDebugContinue {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-continue.svg);
}

.MaskIconTriangleRight {
  mask-image: url(/extension-search-view/e6ddf2e/icons/triangle-right.svg);
}

.MaskIconTriangleDown {
  mask-image: url(/extension-search-view/e6ddf2e/icons/triangle-down.svg);
}

.MaskIconDebugRestart {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-restart.svg);
}

.MaskIconDebugStop {
  mask-image: url(/extension-search-view/e6ddf2e/icons/debug-stop.svg);
}

.MaskIconPreserveCase {
  mask-image: url(/extension-search-view/e6ddf2e/icons/preserve-case.svg);
}

.MaskIconListTree {
  mask-image: url(/extension-search-view/e6ddf2e/icons/list-tree.svg);
}

/* TODO decide */
.MaskIconRecordKey,
.MaskIconRecordKeys {
  mask-image: url(/extension-search-view/e6ddf2e/icons/record-keys.svg);
}

.MaskIconSortPrecedence {
  mask-image: url(/extension-search-view/e6ddf2e/icons/sort-precedence.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(/extension-search-view/e6ddf2e/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(/extension-search-view/e6ddf2e/icons/error.svg);
}

.ProblemsWarningIcon {
  color: var(--ProblemsWarningIconForeground, #91b147);
  mask-image: url(/extension-search-view/e6ddf2e/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 */
/*************/
:root {
  --InputValidationErrorBorder: #be1100;
  --DisabledForeground: rgba(204, 204, 204, 0.5);
}

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

.SearchFieldButtonDisabled {
  color: var(--DisabledForeground);
  cursor: default;
}

.SearchFieldButtonDisabled:where(:hover) {
  background: transparent;
}

.SearchButtonReplaceAll {
  position: relative;
}

.SearchFieldError {
  border-color: var(--InputValidationErrorBorder);
}
/*************/
/* 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;
}

.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;
  contain: content;
  line-height: 13px;
}

.ViewletSearchMessageIndented {
  padding-left: 22px;
}
/*************/
/* 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(/extension-search-view/e6ddf2e/icons/symbol-enum.svg);
}

.SymbolProperty {
  color: var(--SymbolPropertyForeground);
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-property.svg);
}

.SymbolFunction {
  color: var(--SymbolFunctionForeground);
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-method.svg);
}

.SymbolVariable {
  color: var(--SymbolVariableForeground);
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-variable.svg);
}

.SymbolKeyword {
  color: var(--SymbolKeywordForeground);
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-keyword.svg);
}

.SymbolField {
  color: var(--SymbolFieldForeground);
  mask-image: url(/extension-search-view/e6ddf2e/icons/symbol-field.svg);
}
/*************/
/* TitleBarEntry.css */
/*************/
.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; */
}

.TitleBarEntryActive {
  padding: 0;
}

/* TODO maybe have extra focus outline border */
/*
:focus {
  border: 2px solid green;
} */
/*************/
/* Tree.css */
/*************/
.Tree {
  position: relative;
}
/*************/
/* 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;
  flex-shrink: 0;
}

.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));
}
/*************/
/* TreeItems.css */
/*************/
.TreeItems {
  contain: strict;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
/*************/
/* 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 */
/*************/
:root {
  --ColorPickerColor: black;
  --ColorPickerOffsetX: 0px;
}

.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 0;
  pointer-events: all;
  position: absolute;
}

.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;
  translate: var(--ColorPickerOffsetX) 0;
}
/*************/
/* ViewletEditor.css */
/*************/
:root {
  --EditorRowHighlightedBackground: rgba(228, 245, 39, 0.6);
}

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

.EditorRowHighlighted {
  background: var(--EditorRowHighlightedBackground);
}

.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(/extension-search-view/e6ddf2e/icons/squiggly-error.svg) repeat-x bottom left;
}

.DiagnosticWarning {
  background: url(/extension-search-view/e6ddf2e/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;
}

.RenameDetails {
  font-size: 13px;
  padding-left: 3px;
  padding-right: 3px;
}
/*************/
/* 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;
  --InputValidationErrorBorder: #be1100;
}

.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;
  outline: none;
  height: 100%;
}

/* TODO have list contain strict if possible */
.ContainContent {
  contain: content;
}
/*************/
/* 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;
  z-index: 2;
}

.QuickPickHeader {
  display: flex;
  padding: 8px 6px 6px;
  height: 38px;
  contain: strict;
}

.QuickPickItems {
  outline: 0;
  margin: 0;
  padding: 0 5px;
  overflow: hidden;
  contain: content; /* TODO use 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;
}
/*************/
/* ViewletTitleBarTitle.css */
/*************/
.TitleBarTitle {
  /* color: orange; */
  display: flex;
  justify-content: center;
  align-items: center;
}
/*************/
/* WebView.css */
/*************/
.WebView {
  contain: strict;
  position: absolute;
  display: flex;
  background: var(--MainBackground);
}

/* TODO this wrapper element might not be needed */
.WebViewWrapper {
  display: flex;
  flex: 1;
  contain: strict;
}

/* TODO make iframe background configurable through extensions.json
   For example, markdown preview might want a white background
*/
.WebViewIframe {
  flex: 1;
  contain: strict;
  border: none;
  position: absolute;
  background: var(--MainBackground);
  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;
}