/* Copyright (c) Microsoft Corporation.
   Licensed under the MIT License. */

/* Styles for Q# UX components.

Notes:
 - Variables and class names should be prefixed with "qs-" to minimize conflicts in other contexts.
 - Colors should be defined in terms of CSS variables, so that they can be overridden by the editor theme.
 - Values should be defined in terms of the VS Code theme colors, with fall-backs for other environments.

Define variables as using a VS Code variable by default, e.g. "--vscode-foreground", and then a fallback
value for use in other environments. Use the variable in setting class properties, e.g:

:root {
  --qs-foreground: var(--vscode-foreground, black);
}

.qs-button {
  color: var(--qs-foreground);
}

It is recommended that the page these components are included in using a CSS reset such as
modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for more information).
*/

/* Global variables for styling */

/* TODO: Use the qs- prefixes and apply consistently */
:root {
  --heading-background: #262679;
  --main-background: var(
    --vscode-editor-background,
    var(--jp-layout-color0, #ececf0)
  );
  --main-color: var(
    --vscode-editor-foreground,
    var(--jp-widgets-color, #202020)
  );
  --qs-tr-nth-color: var(
    --vscode-list-hoverBackground,
    var(--jp-layout-color1, var(--colab-secondary-surface-color, #f2f2f2))
  );
  --nav-background: #bed1f4;
  --nav-hover-background: #b3bede;
  --nav-current-background: #b5c5f2;
  --border-color: #768f9c;
  --menu-box-fill: var(--main-background);
  --error-background-color: #ffe3e3;
  --warning-background-color: #fff6d7;
  --bar-selected-outline: #587ddd;
}

/* Generic element resets */

/* TODO: Don't apply to entire page */
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  overflow: hidden;
  font-size: 16px;
}

/* TODO: Make the below playground specific classes */

/* Playground body */

.qs-play-body {
  position: relative;
  height: 100vh;
  font-family: system-ui, "Segoe UI", "SegoeUI", Roboto, Helvetica, Arial,
    sans-serif;
  color: var(--main-color);
  background-color: var(--main-background);
  display: grid;
  grid-template-areas:
    "header header"
    "nav content";
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(180px, auto) 1fr;
  column-gap: 16px;
}

/* Playground layout */

.page-header {
  grid-area: header;
  background: var(--heading-background);
  color: var(--main-background);
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 8px;
}

.content {
  grid-area: content;
  height: 100%;
  overflow: auto;
}

#popup {
  position: absolute;
  display: none;
  background-color: white;
  border: 1px solid black;
  border-radius: 2px;
  padding: 8px 16px;
  font-size: 16px;
}

/* Navigation section */

.nav-column {
  grid-area: nav;
  overflow: auto;
  background-color: var(--nav-background);
}

.nav-1 {
  font-size: 1.2rem;
  font-weight: 200;
  color: var(--main-color);
  border-top: 1px solid var(--border-color);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
}

.nav-2 {
  font-size: 1rem;
  font-weight: 200;
  padding: 4px;
  padding-left: 16px;
}

.nav-selectable:hover {
  background-color: var(--nav-hover-background);
  cursor: pointer;
}

.nav-current {
  font-weight: 700;
  background-color: var(--nav-current-background);
}

/* Samples layout */

.samples {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-areas:
    "editor-header results-labels"
    "editor-code output"
    "editor-commands ."
    "editor-diags .";
  grid-template-rows: 35px 1fr 35px 150px;
  grid-template-columns: 3fr 4fr;
  column-gap: 16px;
  padding-right: 16px;
  padding-top: 16px;
}

.samples .code-editor {
  /* This position attribute allows the monaco editor
  to shrink when the window is resized to be smaller.
  https://stackoverflow.com/a/71876526 */
  position: absolute !important;
  grid-area: editor-code;
  height: 100%;
  width: 100%;
}

.samples .button-row {
  grid-area: editor-commands;
}

.samples .editor-header {
  grid-area: editor-header;
}

.samples .diag-list {
  overflow: auto;
  grid-area: editor-diags;
}

.samples .output {
  grid-area: output;
  height: 100%;
  min-height: 400px;
  resize: none;
}

/* Editor section */

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.file-name {
  border: 1px solid var(--border-color);
  border-bottom: 0px;
  width: 100px;
  text-align: center;
  height: 32px;
  line-height: 32px;
  background-color: white;
}

.icon-row > * {
  margin-left: 4px;
  font-size: 1.4rem;
  cursor: pointer;
}

.code-editor {
  height: 40vh;
  min-height: 400px;
  border: 1px solid var(--border-color);
}

.button-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
}

.button-row > * {
  margin-left: 10px;
  font-size: 1rem;
}

.main-button {
  background-color: var(--nav-background);
  font-size: 1rem;
  color: var(--main-color);
  width: 72px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.main-button:disabled {
  background-color: gray;
  cursor: default;
}

.diag-list {
  margin-top: 24px;
  margin-bottom: 24px;
  min-height: 48px;
}

.diag-row {
  border: 1px solid var(--border-color);
  padding: 4px;
  border-bottom: 0.5px solid gray;
  font-size: 0.9rem;
  margin-bottom: -1px;
}

.diag-row > span {
  font-weight: 200;
}

.diag-help {
  font-weight: 200;
  font-style: italic;
}

.error-row {
  background-color: var(--error-background-color);
}

.warning-row {
  background-color: var(--warning-background-color);
}

/* Katas */

.kata-override {
  /* The padding is just to shrink the width
  to make the content more readable */
  padding-right: 40%;
  background-color: var(--main-background);
}

/* Documentation */

.doc-container {
  /* The padding is just to shrink the width
  to make the content more readable */
  padding-right: 40%;
  background-color: var(--main-background);
}

/* TODO: Update all components with specific prefixes */

/* Results panels */

.active-tab {
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: underline;
}

.results-labels {
  grid-area: results-labels;
  display: flex;
  align-items: center;
}

.results-labels > div {
  margin-right: 40px;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
}

.ast-output {
  height: 100%;
  width: 100%;
  resize: none;
  white-space: pre;
}

.hir-output {
  height: 100%;
  width: 100%;
  resize: none;
  white-space: pre;
}

.rir-output {
  height: 40vh;
  min-height: 400px;
  width: 100%;
  resize: none;
  white-space: pre;
}

.qir-output {
  height: 100%;
  width: 100%;
  resize: none;
  white-space: pre;
}

/* Results output */

.output-header {
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 16px;
  margin-bottom: 16px;
}

.prev-next {
  margin-bottom: 16px;
  font-weight: 200;
  cursor: pointer;
}

.result-label {
  margin-bottom: 24px;
  font-style: italic;
  font-weight: 300;
}

.message-output {
  font-weight: 300;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

/* State table */

.state-table {
  border-collapse: collapse;
  font-size: 0.9rem;
  width: 100%;
  min-width: 400px;
  margin-bottom: 16px;
}

.state-table thead tr {
  background: var(--nav-background);
}

.state-table tbody tr {
  border-top: 1px solid gray;
}

.state-table td,
.state-table th {
  text-align: center;
  padding: 6px;
  white-space: nowrap;
}

.state-table progress {
  margin-right: 2px;
}

/* Histogram */

.histogram {
  max-height: calc(100vh - 40px);
  max-width: 600px;
  border: 1px solid var(--border-color);
  background-color: var(--vscode-sideBar-background, white);
}

.bar {
  fill: var(--vscode-button-background, var(--nav-background));
}

.bar:hover {
  fill: var(--vscode-button-hoverBackground, var(--nav-hover-background));
}

.bar-selected {
  stroke: var(--bar-selected-outline);
  fill: var(--nav-current-background);
}

.bar-label {
  font-size: 3pt;
  fill: var(--vscode-button-foreground, var(--main-color));
  text-anchor: end;
  pointer-events: none;
}

.histo-label {
  font-size: 3.5pt;
  fill: var(--vscode-foreground, #3b3b3b);
}

.hover-text {
  font-size: 3.5pt;
  fill: gray;
  text-anchor: middle;
}

.menu-icon * {
  stroke: black;
  fill: var(--vscode-sideBar-background, white);
  stroke: var(--vscode-icon-foreground, #3b3b3b);
}

.menu-box {
  fill: var(--menu-box-fill);
  stroke: black;
  stroke-width: 0.1;
}

.menu-item {
  width: 32px;
  height: 10px;
  fill: var(--vscode-list-inactiveSelectionBackground, var(--nav-background));
  stroke: gray;
  stroke-width: 0.2;
}

/* --vscode-list-inactiveSelectionBackground */

.menu-item:hover {
  stroke-width: 0.6;
  fill: var(--vscode-list-hoverBackground, var(--nav-hover-background));
}

.menu-selected {
  /* stroke: #0800ff; */
  fill: var(
    --vscode-list-activeSelectionBackground,
    var(--nav-current-background)
  );
}

.menu-text {
  font-size: 4.5px;
  pointer-events: none;
  fill: var(--main-color);
}

.menu-separator {
  stroke: gray;
  stroke-width: 0.25;
}

.help-info {
  fill: var(--menu-box-fill);
  stroke: gray;
  stroke-width: 0.5;
}

.help-info-text {
  font-size: 4.5px;
  pointer-events: none;
  fill: var(--main-color);
}

/* RE details */

.estimate-details {
  padding: 1em;
}

.estimate-details > summary {
  font-size: 1.1em;
}

.estimate-table {
  margin-top: 1em;
  font-size: 0.9em;
}

.estimate-table tr:nth-child(even) {
  background-color: var(--qs-tr-nth-color);
}

.estimate-cell {
  vertical-align: top;
  padding-right: 8px;
}

.title-cell {
  font-weight: bold;
  white-space: nowrap;
}

.value-cell {
  text-align: center;
  width: 100px;
  white-space: nowrap;
}

.estimate-explanation {
  margin-top: 1em;
  margin-bottom: 1em;
  max-width: 500px;
}

.estimate-assumption {
  margin: 1em;
}

/* Space chart */

/* Needed until https://github.com/microsoft/vscode-jupyter/issues/7161 is resolved */
.cell-output-ipywidget-background {
  background-color: transparent !important;
}

#pieChart {
  fill: var(--main-color);
}

.spaceReport {
  display: flex;
  flex-direction: column;
}

.spaceReportHeader {
  font-size: 13px;
  background-color: var(--qs-tr-nth-color);
  border-top: 0.5px gray solid;
  border-bottom: 0.5px gray solid;
  padding: 10px;
}

.spaceReportRow {
  display: flex;
  font-size: 12px;
  padding: 10px 24px;
}

.spaceDetailText {
  width: 200px;
}

.qs-help {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.qs-help h1 {
  margin-top: 16px;
  margin-bottom: 8px;
  line-height: 1.25;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--vscode-editorWidget-border);
}

.qs-help h2 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.25;
  padding-bottom: 0.3em;
  font-size: 1.4em;
  border-bottom: 1px solid var(--vscode-editorWidget-border);
}

/* Results Table */

.qs-resultsTable-sortedTable {
  border-collapse: collapse;
  margin: 12px 0px;
  outline: none;
}

.qs-resultsTable-sortedTable th,
.qs-resultsTable-sortedTable td {
  padding: 4px 8px;
  text-align: left;
}

.qs-resultsTable-dragEnter {
  background-color: #8888;
  border-left: 1.5px solid blue;
  border-right: 1.5px solid blue;
}

.qs-resultsTable-sortedTable tr:nth-child(even) {
  background: var(--qs-tr-nth-color);
}

.qs-resultsTable-sortedTable tbody tr:hover {
  background: var(--vscode-list-hoverBackground, var(--js-layout-color2));
}

.qs-resultsTable-sortedTableSelectedRow td {
  background: var(--vscode-button-background, var(--jp-layout-color3));
  color: var(--vscode-button-foreground);
  font-weight: 600;
}

.qs-resultsTable-columnMenu {
  display: none;
  width: 160px;
}

.qs-resultsTable-showColumnMenu {
  display: block;
  position: absolute;
  background-color: var(--vscode-menu-background, var(--main-background));
  border: 1px solid #8888;
  padding: 4px;
  z-index: 100;
  text-align: left;
}

.qs-resultsTable-menuItem {
  cursor: pointer;
  background-color: var(--vscode-list-hoverBackground, var(--jp-layout-color1));
  padding: 4px;
  margin: 2px;
  font-size: 14px;
  font-weight: 400;
}

.qs-resultsTable-menuItem:hover {
  background-color: var(--vscode-menu-border, var(--jp-layout-color2));
}

.qs-resultsTable-columnSelected {
  cursor: pointer;
  padding: 4px;
  font-weight: 400;
  font-size: 14px;
  background-color: var(--vscode-button-background, var(--jp-brand-color1));
  color: var(--vscode-button-foreground, var(--jp-ui-inverse-font-color0));
  margin: 2px;
  border-radius: 3px;
}

.qs-resultsTable-headerCell {
  padding-right: 20px;
}

.qs-resultsTable-sortHeaderCell {
  padding-right: 4px;
}

@keyframes codicon-spin {
  100% {
    transform: rotate(360deg);
    transform-origin: center;
  }
}

.codicon-modifier-spin {
  fill: var(--vscode-icon-foreground, gray);
  animation: codicon-spin 1.5s steps(45) infinite;
}

.qs-scatterChart-x-axisTitle,
.qs-scatterChart-y-axisTitle {
  text-anchor: middle;
  font-size: 16px;
  fill: var(--main-color);
}

.qs-scatterChart-y-axisTitle {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.qs-scatterChart-point {
  r: 2px;
  stroke-width: 4px;
}

.qs-scatterChart-hover:hover {
  r: 4px;
  stroke-width: 4px;
  fill: white;
}

.qs-scatterChart-point-selected {
  r: 8px;
  stroke-width: 4px;
  fill: white;
}

.qs-scatterChart-watermark {
  font-size: 16px;
  fill: var(--main-color);
}

.qs-scatterChart-tooltip,
.qs-scatterChart-selectedInfo {
  position: absolute;
  visibility: hidden;
  background: var(--main-background);
  color: var(--main-color);
  border: var(--border-color) 1px solid;
  padding: 4px;
}

/* This rule adds the little triange pointer at the top */
.qs-scatterChart-tooltip::after,
.qs-scatterChart-selectedInfo::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--border-color) transparent;
}

.qs-scatterChart-axis,
.qs-scatterChart-tick-line {
  stroke: var(--border-color);
}

.qs-scatterChart-x-tick-text {
  text-anchor: middle;
  fill: var(--main-color);
}

.qs-scatterChart-y-tick-text {
  text-anchor: end;
  fill: var(--main-color);
}

.qs-estimatesOverview-error {
  color: red;
}

.qs-estimatesOverview-saveIcon {
  cursor: pointer;
  width: 3em;
  height: 3em;
  background-color: var(--main-background);
  position: absolute;
  bottom: 5px;
  left: 5px;
  border: none;
}

.qs-estimatesOverview-saveIconSvgPath {
  fill: var(--main-color) !important;
  fill-rule: evenodd !important;
  clip-rule: evenodd !important;
}
