/* You can add global styles to this file, and also import other style files */

// ================= variables ===========================

html,
body {
  height: 100%;
  background-color: var(--sb-page-background);
  color: var(--foreground);
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--sb-ui-font-family);
}
* {
  box-sizing: border-box;
}

app-root {
  display: block;
  height: 100vh;
}

// ================= component ===========================

// -------------- button --------------
.reset-btn {
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}
.link-btn {
  text-decoration: underline;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 14px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.common-icon,
.common-icon.mat-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}

// -------------- scrollbar --------------

/* Set the width of the scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
  background: #2f2f2f; /* Background color of the scrollbar track */
  border-radius: 8px; /* Rounded corners of the track */
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: #555; /* Color of the scrollbar thumb */
  border-radius: 8px; /* Rounded corners of the thumb */
  border: 3px solid #2f2f2f; /* Padding and background color of the thumb */
}

/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888; /* Color of the thumb when hovered */
}

/* Style the scrollbar thumb when active (clicked) */
::-webkit-scrollbar-thumb:active {
  background: #555; /* Color of the thumb when active */
}

// ================= variables ===========================

/// theme variables from: https://stackblitz.com/
:root {
  --sb-ui-font-family: system-ui, -apple-system, Segoe UI, Roboto, Cantarell,
    sans-serif;
  --sb-code-font-family: Menlo, Cascadia Code, Consolas, Liberation Mono,
    monospace;
  --sb-alert-background: hsl(220, 70%, 40%);
  --sb-alert-foreground: hsl(0, 0%, 100%);
  --sb-brand-stackblitz-blue: #1389fd;
  --sb-card-background: hsl(220 12% 20%);
  --sb-card-shadow: hsl(0 0% 0% / 50%);
  --sb-control-active-background: hsl(205 100% 40%);
  --sb-control-active-pressed-background: hsl(205 100% 45%);
  --sb-control-active-thumb: hsl(0 0% 96%);
  --sb-control-border-alt: transparent;
  --sb-control-border-focus: hsl(205 100% 50%);
  --sb-control-border-strong: hsl(220 10% 80%);
  --sb-control-border: hsl(220 10% 45%);
  --sb-dialog-backdrop: hsl(220 40% 5% / 0.7);
  --sb-error-background: hsl(355 100% 20%);
  --sb-error-border: hsl(355 100% 60%);
  --sb-error-foreground: hsl(0 0% 100%);
  --sb-foreground-active: hsl(0 0% 94%);
  --sb-foreground-alt: hsl(0 0% 62%);
  --sb-foreground-disabled: hsl(0 0% 45%);
  --sb-foreground-highlight-high: hsl(165 100% 60%);
  --sb-foreground-highlight-low: hsl(186 52% 48%);
  --sb-foreground-highlight: hsl(191 91% 69%);
  --sb-foreground-inverted: hsl(220 18% 10%);
  --sb-foreground-negative: hsl(355 80% 65%);
  --sb-foreground-warning: hsl(55 65% 60%);
  --sb-foreground: hsl(0 0% 80%);
  --sb-icon-foreground: hsl(0 0% 80%);
  --sb-luminosity-minus1: hsl(0 0% 0% / 0.15);
  --sb-luminosity-minus2: hsl(0 0% 0% / 0.25);
  --sb-luminosity-plus1: hsl(220 60% 95% / 0.06);
  --sb-luminosity-plus2: hsl(220 60% 95% / 0.1);
  --sb-luminosity-plus3: hsl(220 60% 95% / 0.14);
  --sb-menu-active-background: hsl(205 100% 35%);
  --sb-menu-active-foreground: hsl(0 0% 100%);
  --sb-menu-background: hsl(220 15% 24%);
  --sb-menu-border: transparent;
  --sb-menu-shadow: hsl(0 0% 0% / 0.25);
  --sb-page-alt-background: hsl(220 18% 10%);
  --sb-page-background: hsl(220 10% 14%);
  --sb-selection-background: hsl(205 100% 35%);
  --sb-selection-foreground: hsl(0 0% 100%);
  --sb-separator-alt: hsl(220 10% 30% / 0.6);
  --sb-separator-base: hsl(220 10% 30%);
  --sb-separator-strong: hsl(220 10% 35%);
  --sb-sidebar-background: hsl(220 18% 10%);
  --sb-toolbar-background: hsl(220 10% 20%);
  --sb-tooltip-background: hsl(220 15% 24%);
  --sb-tooltip-border: transparent;
  --sb-tooltip-shadow: hsl(0 0% 0% / 0.25);
  --foreground: #cccccc;
  --errorForeground: #f48771;
  --descriptionForeground: #ccccccb3;
  --icon-foreground: #c5c5c5;
  --focusBorder: #4288fdcc;
  --textSeparator-foreground: #ffffff2e;
  --textLink-foreground: #3794ff;
  --textLink-activeForeground: #3794ff;
  --textPreformat-foreground: #d7ba7d;
  --textBlockQuote-background: #7f7f7f1a;
  --textBlockQuote-border: #007acc80;
  --textCodeBlock-background: #0a0a0a66;
  --widget-shadow: #000000;
  --input-background: hsl(220 60% 95% / 0.1);
  --input-foreground: #cccccc;
  --inputOption-activeBorder: #007acc00;
  --inputOption-activeBackground: #4288fd66;
  --input-placeholderForeground: #a6a6a6;
  --inputValidation-infoBackground: #063b49;
  --inputValidation-infoBorder: #007acc;
  --inputValidation-warningBackground: #352a05;
  --inputValidation-warningBorder: #b89500;
  --inputValidation-errorBackground: #5a1d1d;
  --inputValidation-errorBorder: #be1100;
  --dropdown-background: #3c3c3c;
  --dropdown-foreground: #f0f0f0;
  --dropdown-border: #3c3c3c;
  --checkbox-background: #3c3c3c;
  --checkbox-foreground: #f0f0f0;
  --checkbox-border: #3c3c3c;
  --pickerGroup-foreground: #3794ff;
  --pickerGroup-border: #3f3f46;
  --button-foreground: hsl(0 0% 94%);
  --button-background: hsl(220 55% 48%);
  --button-hoverBackground: hsl(220 55% 56%);
  --badge-background: #4d4d4d;
  --badge-foreground: #ffffff;
  --scrollbar-shadow: #000000;
  --scrollbarSlider-background: #79797966;
  --scrollbarSlider-hoverBackground: #646464b3;
  --scrollbarSlider-activeBackground: #bfbfbf66;
  --progressBar-background: #0e70c0;
  --editorError-foreground: #f48771;
  --editorWarning-foreground: #cca700;
  --editorInfo-foreground: #75beff;
  --editorHint-foreground: #eeeeeeb3;
  --editor-background: hsl(220 18% 10%);
  --editor-foreground: hsl(0 0% 80%);
  --editorWidget-background: #252526;
  --editorWidget-foreground: #cccccc;
  --editorWidget-border: #454545;
  --editor-selectionBackground: #264f78;
  --editor-inactiveSelectionBackground: #3a3d41;
  --editor-selectionHighlightBackground: #add6ff26;
  --editor-findMatchBackground: #515c6a;
  --editor-findMatchHighlightBackground: #ea5c0055;
  --editor-findRangeHighlightBackground: #3a3d4166;
  --searchEditor-findMatchBackground: #ea5c0038;
  --editor-hoverHighlightBackground: #264f7840;
  --editorHoverWidget-background: #252526;
  --editorHoverWidget-foreground: #cccccc;
  --editorHoverWidget-border: #454545;
  --editorHoverWidget-statusBarBackground: #2c2c2d;
  --editorLink-activeForeground: #4e94ce;
  --editorLightBulb-foreground: #ffcc00;
  --editorLightBulbAutoFix-foreground: #75beff;
  --diffEditor-insertedTextBackground: #9bb95533;
  --diffEditor-removedTextBackground: #ff000033;
  --list-focusBackground: hsl(205 80% 20%);
  --list-activeSelectionBackground: hsl(205 100% 35%);
  --list-activeSelectionForeground: #ffffff;
  --list-inactiveSelectionBackground: hsl(220 16% 28%);
  --list-hoverBackground: hsl(220 12% 20%);
  --list-dropBackground: #383b3d;
  --list-highlightForeground: #0097fb;
  --list-invalidItemForeground: #b89500;
  --list-errorForeground: #f88070;
  --list-warningForeground: #cca700;
  --listFilterWidget-background: #653723;
  --listFilterWidget-outline: #00000000;
  --listFilterWidget-noMatchesOutline: #be1100;
  --list-filterMatchBackground: #ea5c0055;
  --tree-indentGuidesStroke: #585858;
  --menu-foreground: #cccccc;
  --menu-background: #252526;
  --menu-selectionForeground: #ffffff;
  --menu-selectionBackground: #094771;
  --menu-separatorBackground: #bbbbbb;
  --editor-snippetTabstopHighlightBackground: #7c7c7c4d;
  --editor-snippetFinalTabstopHighlightBorder: #525252;
  --breadcrumb-foreground: #cccccccc;
  --breadcrumb-background: #1e1e1e;
  --breadcrumb-focusForeground: #e0e0e0;
  --breadcrumb-activeSelectionForeground: #e0e0e0;
  --breadcrumbPicker-background: #252526;
  --merge-currentHeaderBackground: #40c8ae80;
  --merge-currentContentBackground: #40c8ae33;
  --merge-incomingHeaderBackground: #40a6ff80;
  --merge-incomingContentBackground: #40a6ff33;
  --merge-commonHeaderBackground: #60606066;
  --merge-commonContentBackground: #60606029;
  --editorOverviewRuler-currentContentForeground: #40c8ae80;
  --editorOverviewRuler-incomingContentForeground: #40a6ff80;
  --editorOverviewRuler-commonContentForeground: #60606066;
  --editorOverviewRuler-findMatchForeground: #d186167e;
  --editorOverviewRuler-selectionHighlightForeground: #a0a0a0cc;
  --minimap-findMatchHighlight: #d18616;
  --minimap-selectionHighlight: #264f78;
  --minimap-errorHighlight: #ff1212b3;
  --minimap-warningHighlight: #cca700;
  --problemsErrorIcon-foreground: #f48771;
  --problemsWarningIcon-foreground: #cca700;
  --problemsInfoIcon-foreground: #75beff;
  --activityBarBadge-background: #007acc;
  --editorIndentGuide-activeBackground: #707070;
  --editorIndentGuide-background: #404040;
  --settings-numberInputBackground: #292929;
  --settings-textInputBackground: #292929;
  --sideBarTitle-foreground: #bbbbbb;
  --statusBarItem-remoteBackground: #16825d;
  --statusBarItem-remoteForeground: #ffffff;
  --activityBar-activeBorder: #ffffff;
  --activityBar-background: hsl(220 10% 20%);
  --activityBar-dropBackground: #ffffff1f;
  --activityBar-foreground: hsl(0 0% 94%);
  --activityBar-inactiveForeground: #ffffff66;
  --activityBarBadge-foreground: #ffffff;
  --debugExceptionWidget-background: #420b0d;
  --debugExceptionWidget-border: #a31515;
  --debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
  --debugIcon-breakpointDisabledForeground: #848484;
  --debugIcon-breakpointForeground: #e51400;
  --debugIcon-breakpointStackframeForeground: #89d185;
  --debugIcon-breakpointUnverifiedForeground: #848484;
  --debugIcon-continueForeground: #75beff;
  --debugIcon-disconnectForeground: #f48771;
  --debugIcon-pauseForeground: #75beff;
  --debugIcon-restartForeground: #89d185;
  --debugIcon-startForeground: #89d185;
  --debugIcon-stepBackForeground: #75beff;
  --debugIcon-stepIntoForeground: #75beff;
  --debugIcon-stepOutForeground: #75beff;
  --debugIcon-stepOverForeground: #75beff;
  --debugIcon-stopForeground: #f48771;
  --debugToolBar-background: #333333;
  --editor-focusedStackFrameHighlightBackground: #7abd7a4d;
  --editor-foldBackground: #264f784d;
  --editor-lineHighlightBorder: #282828;
  --editor-rangeHighlightBackground: #ffffff0b;
  --editor-stackFrameHighlightBackground: #ffff0033;
  --editor-symbolHighlightBackground: #ea5c0055;
  --editor-wordHighlightBackground: #575757b8;
  --editor-wordHighlightStrongBackground: #004972b8;
  --editorActiveLineNumber-foreground: #c6c6c6;
  --editorBracketMatch-background: #0064001a;
  --editorBracketMatch-border: #888888;
  --editorCodeLens-foreground: #999999;
  --editorCursor-foreground: #aeafad;
  --editorGroup-border: #444444;
  --editorGroup-dropBackground: #53595d80;
  --editorGroupHeader-noTabsBackground: #1e1e1e;
  --editorGroupHeader-tabsBackground: #252526;
  --editorGutter-addedBackground: #587c0c;
  --editorGutter-background: #1e1e1e;
  --editorGutter-commentRangeForeground: #c5c5c5;
  --editorGutter-deletedBackground: #94151b;
  --editorGutter-modifiedBackground: #0c7d9d;
  --editorLineNumber-activeForeground: #c6c6c6;
  --editorLineNumber-foreground: #858585;
  --editorMarkerNavigation-background: #2d2d30;
  --editorMarkerNavigationError-background: #f48771;
  --editorMarkerNavigationInfo-background: #75beff;
  --editorMarkerNavigationWarning-background: #cca700;
  --editorOverviewRuler-addedForeground: #587c0c99;
  --editorOverviewRuler-border: #7f7f7f4d;
  --editorOverviewRuler-bracketMatchForeground: #a0a0a0;
  --editorOverviewRuler-deletedForeground: #94151b99;
  --editorOverviewRuler-errorForeground: #ff1212b3;
  --editorOverviewRuler-infoForeground: #75beff;
  --editorOverviewRuler-modifiedForeground: #0c7d9d99;
  --editorOverviewRuler-rangeHighlightForeground: #007acc99;
  --editorOverviewRuler-warningForeground: #cca700;
  --editorOverviewRuler-wordHighlightForeground: #a0a0a0cc;
  --editorOverviewRuler-wordHighlightStrongForeground: #c0a0c0cc;
  --editorPane-background: #1e1e1e;
  --editorRuler-foreground: #5a5a5a;
  --editorSuggestWidget-background: #252526;
  --editorSuggestWidget-border: #454545;
  --editorSuggestWidget-foreground: #d4d4d4;
  --editorSuggestWidget-highlightForeground: #0097fb;
  --editorSuggestWidget-selectedBackground: #062f4a;
  --editorUnnecessaryCode-opacity: #000000aa;
  --editorWhitespace-foreground: #e3e4e229;
  --extensionBadge-remoteBackground: #007acc;
  --extensionBadge-remoteForeground: #ffffff;
  --extensionButton-prominentBackground: #327e36;
  --extensionButton-prominentForeground: #ffffff;
  --extensionButton-prominentHoverBackground: #28632b;
  --gitDecoration-addedResourceForeground: #81b88b;
  --gitDecoration-conflictingResourceForeground: #6c6cc4;
  --gitDecoration-deletedResourceForeground: #c74e39;
  --gitDecoration-ignoredResourceForeground: #8c8c8c;
  --gitDecoration-modifiedResourceForeground: #e2c08d;
  --gitDecoration-submoduleResourceForeground: #8db9e2;
  --gitDecoration-untrackedResourceForeground: #73c991;
  --imagePreview-border: #80808059;
  --menubar-selectionBackground: #ffffff1a;
  --menubar-selectionForeground: #cccccc;
  --minimapGutter-addedBackground: #587c0c;
  --minimapGutter-deletedBackground: #94151b;
  --minimapGutter-modifiedBackground: #0c7d9d;
  --notificationCenterHeader-background: #303031;
  --notificationLink-foreground: #3794ff;
  --notifications-background: #252526;
  --notifications-border: #303031;
  --notifications-foreground: #cccccc;
  --notificationsErrorIcon-foreground: #f48771;
  --notificationsInfoIcon-foreground: #75beff;
  --notificationsWarningIcon-foreground: #cca700;
  --panel-background: #1e1e1e;
  --panel-border: #80808059;
  --panel-dropBackground: #ffffff1f;
  --panelTitle-activeBorder: #e7e7e7;
  --panelTitle-activeForeground: #e7e7e7;
  --panelTitle-inactiveForeground: #e7e7e799;
  --peekView-border: #007acc;
  --peekViewEditor-background: #001f33;
  --peekViewEditor-matchHighlightBackground: #ff8f0099;
  --peekViewEditorGutter-background: #001f33;
  --peekViewResult-background: #252526;
  --peekViewResult-fileForeground: #ffffff;
  --peekViewResult-lineForeground: #bbbbbb;
  --peekViewResult-matchHighlightBackground: #ea5c004d;
  --peekViewResult-selectionBackground: #3399ff33;
  --peekViewResult-selectionForeground: #ffffff;
  --peekViewTitle-background: #1e1e1e;
  --peekViewTitleDescription-foreground: #ccccccb3;
  --peekViewTitleLabel-foreground: #ffffff;
  --quickInput-background: #252526;
  --settings-checkboxBackground: #3c3c3c;
  --settings-checkboxBorder: #3c3c3c;
  --settings-checkboxForeground: #f0f0f0;
  --settings-dropdownBackground: #3c3c3c;
  --settings-dropdownBorder: #3c3c3c;
  --settings-dropdownForeground: #f0f0f0;
  --settings-dropdownListBorder: #454545;
  --settings-headerForeground: #e7e7e7;
  --settings-modifiedItemIndicator: #0c7d9d;
  --settings-numberInputForeground: #cccccc;
  --settings-textInputForeground: #cccccc;
  --sideBar-background: hsl(220 10% 14%);
  --sideBar-dropBackground: #ffffff1f;
  --sideBarSectionHeader-background: hsl(220 12% 20%);
  --statusBar-background: #007acc;
  --statusBar-debuggingBackground: #cc6633;
  --statusBar-debuggingForeground: #ffffff;
  --statusBar-foreground: #ffffff;
  --statusBar-noFolderBackground: #68217a;
  --statusBar-noFolderForeground: #ffffff;
  --statusBarItem-activeBackground: #ffffff2e;
  --statusBarItem-hoverBackground: #ffffff1f;
  --statusBarItem-prominentBackground: #00000080;
  --statusBarItem-prominentForeground: #ffffff;
  --statusBarItem-prominentHoverBackground: #0000004d;
  --symbolIcon-arrayForeground: #cccccc;
  --symbolIcon-booleanForeground: #cccccc;
  --symbolIcon-classForeground: #ee9d28;
  --symbolIcon-colorForeground: #cccccc;
  --symbolIcon-constantForeground: #cccccc;
  --symbolIcon-constructorForeground: #b180d7;
  --symbolIcon-enumeratorForeground: #ee9d28;
  --symbolIcon-enumeratorMemberForeground: #75beff;
  --symbolIcon-eventForeground: #ee9d28;
  --symbolIcon-fieldForeground: #75beff;
  --symbolIcon-fileForeground: #cccccc;
  --symbolIcon-folderForeground: #cccccc;
  --symbolIcon-functionForeground: #b180d7;
  --symbolIcon-interfaceForeground: #75beff;
  --symbolIcon-keyForeground: #cccccc;
  --symbolIcon-keywordForeground: #cccccc;
  --symbolIcon-methodForeground: #b180d7;
  --symbolIcon-moduleForeground: #cccccc;
  --symbolIcon-namespaceForeground: #cccccc;
  --symbolIcon-nullForeground: #cccccc;
  --symbolIcon-numberForeground: #cccccc;
  --symbolIcon-objectForeground: #cccccc;
  --symbolIcon-operatorForeground: #cccccc;
  --symbolIcon-packageForeground: #cccccc;
  --symbolIcon-propertyForeground: #cccccc;
  --symbolIcon-referenceForeground: #cccccc;
  --symbolIcon-snippetForeground: #cccccc;
  --symbolIcon-stringForeground: #cccccc;
  --symbolIcon-structForeground: #cccccc;
  --symbolIcon-textForeground: #cccccc;
  --symbolIcon-typeParameterForeground: #cccccc;
  --symbolIcon-unitForeground: #cccccc;
  --symbolIcon-variableForeground: #75beff;
  --tab-activeBackground: hsl(220 18% 10%);
  --tab-activeForeground: #ffffff;
  --tab-activeModifiedBorder: #3399cc;
  --tab-border: #252526;
  --tab-inactiveBackground: hsl(220 10% 16.5%);
  --tab-inactiveForeground: #ffffff80;
  --tab-inactiveModifiedBorder: #3399cc80;
  --tab-unfocusedActiveBackground: #1e1e1e;
  --tab-unfocusedActiveForeground: #ffffff80;
  --tab-unfocusedActiveModifiedBorder: #3399cc80;
  --tab-unfocusedInactiveForeground: #ffffff40;
  --tab-unfocusedInactiveModifiedBorder: #3399cc40;
  --terminal-ansiBlack: hsl(220 18% 10%);
  --terminal-ansiBlue: #57c7ff;
  --terminal-ansiBrightBlack: #686868;
  --terminal-ansiBrightBlue: #57c7ff;
  --terminal-ansiBrightCyan: #9aedfe;
  --terminal-ansiBrightGreen: #5af78e;
  --terminal-ansiBrightMagenta: #ff6ac1;
  --terminal-ansiBrightRed: #ff5c57;
  --terminal-ansiBrightWhite: #eff0eb;
  --terminal-ansiBrightYellow: #f3f99d;
  --terminal-ansiCyan: #9aedfe;
  --terminal-ansiGreen: #5af78e;
  --terminal-ansiMagenta: #ff6ac1;
  --terminal-ansiRed: #ff5c57;
  --terminal-ansiWhite: #f1f1f0;
  --terminal-ansiYellow: #f3f99d;
  --terminal-background: hsl(220 18% 10%);
  --terminal-border: #80808059;
  --terminal-foreground: #eff0eb;
  --terminal-selectionBackground: rgba(151, 151, 155, 0.2);
  --titleBar-activeBackground: #3c3c3c;
  --titleBar-activeForeground: #cccccc;
  --titleBar-inactiveBackground: #3c3c3c99;
  --titleBar-inactiveForeground: #cccccc99;
  --platform-luminosity-bg-z0: hsl(216 10% 10%);
}
