@import "./components/Panel/panel.css";
@import "./components/button/button.css";
@import "react-tooltip/dist/react-tooltip.css";
@import "reactjs-popup/dist/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

.studio {
  scroll-behavior: smooth;
}

/* global styles required by react-treeview */

.tree-view_item {
  display: flex;
}

.tree-view_children {
  margin-left: 8px;
}

.tree-view_arrow {
  cursor: pointer;
  margin-right: 1px;
}

.tree-view_arrow:not(.tree-view_arrow-collapsed):after {
  content: "\25be";
  @apply text-gray-dark;
  @apply dark:text-gray-lighter;
}

.tree-view_arrow.tree-view_arrow-collapsed:after {
  content: "\25b8";
  @apply text-gray-dark;
  @apply dark:text-gray-lighter;
}

.tree-view_disabled {
  cursor: auto !important;
  pointer-events: none !important;
  opacity: 0.5;
}

.node-selector-tree .tree-view_arrow {
  display: none;
}

.node-selector-tree .tree-view_children {
  margin-left: 24px;
}

.node-selector-tree .tree-view_label:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

/* monaco styles */
.studio .monaco-link {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}
.studio .after-hidden .editor.original,
.studio .after-hidden .original-in-monaco-diff-editor {
  display: none;
}

.after-hidden .editor.modified {
  left: 0 !important;
}

.studio .output-shown .editor.original,
.studio .output-shown .original-in-monaco-diff-editor {
  display: none;
}

.studio .output-shown .editor.modified {
  width: 100%;
}

.studio .after-shown .editor.modified {
  display: none;
}

.studio .after-shown .editor.original {
  display: block;
  width: 100%;
}

.studio .after-shown .editor.original * {
  width: 100%;
}

.studio .after-shown .editor.original {
  left: 0 !important;
}

.studio .monaco-placeholder {
  position: absolute;
  display: block;
  white-space: pre-wrap;
  top: 0px;
  left: 20px;
  font-size: 18px;
  color: #757575;
  font-family: Consolas, "Courier New", monospace;
  pointer-events: none;
  user-select: none;
  line-height: 20px;
}

/**
 * resize handler
 */

.studio .resizeHandleOuter {
  position: relative;
  @apply bg-border-light;
  @apply dark:bg-border-dark;
}

.studio .resizeHandleOuter:hover {
  @apply bg-primary-light;
  @apply dark:bg-primary-dark;
}

.studio .resizeHandlerOuter-horizontal {
  width: 3px;
  outline: none;
  @apply h-full;
  @apply my-auto;
}

.studio .resizeHandlerOuter-vertical {
  height: 3px;
  outline: none;
  @apply w-full;
  @apply mx-auto;
}

.studio .resizeHandleOuter[data-resize-handle-active] {
  @apply bg-primary;
  @apply dark:bg-primary;
}

.studio .resizeHandlerOuter-horizontal .icon {
  width: 1em;
  height: 1em;
  position: absolute;
  left: calc(50% - 0.5rem);
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
}

.studio .resizeHandlerOuter-vertical .icon {
  width: 1em;
  height: 1em;
  position: absolute;
  right: calc(50% - 0.5rem);
  bottom: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
}

.studio .resizeHandleOuter .icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: calc(50% - 0.5rem);
  bottom: calc(50% - 0.5rem);
}

.studio .resizeHandleInner-horizontal {
  top: 0.25em;
  bottom: 0.25em;
  left: 0.25em;
  right: 0.25em;
  border-radius: 0.25em;
  transition: background-color 0.2s linear;
}

.studio .resizeHandleInner-vertical {
  top: 0.25em;
  bottom: 0.25em;
  left: 0.25em;
  right: 0.25em;
  border-radius: 0.25em;
  transition: background-color 0.2s linear;
}

.highlight {
  text-decoration-line: underline;
  text-decoration-color: rgba(51, 102, 255, 0.71);
  text-underline-offset: 3px;
}

.studio .dark .highlight {
  background-color: rgba(96, 96, 192, 0.5);
}

.studio .monaco-editor {
  --vscode-editor-selectionHighlightBackground: rgba(62, 172, 236, 0.73) !important;
  --vscode-editor-selectionBackground: rgba(62, 172, 236, 0.73) !important;
  --vscode-editor-selectedBackground: rgba(62, 172, 236, 0.73) !important;
  /* background for highlight of the same elements*/
  --vscode-editor---wordHighlightStrongBackground: rgba(62, 172, 236, 0.73) !important;
  --vscode-diffEditor-removedLineBackground: rgb(255 0 0 / 10%);
  --vscode-diffEditor-removedTextBackground: rgb(255 0 0 / 10%);
}

.studio::selection {
  background-color: rgba(62, 172, 236, 0.73) !important;
}

.studio .popup-content {
  @apply bg-gray-light-darker;
  @apply dark:bg-gray-light;
  @apply dark:border-gray-darker;
  @apply shadow-none;
}

.studio .popup-arrow {
  @apply text-gray-light-darker;
  @apply dark:text-gray-light;
  @apply dark:border-gray-darker;
  @apply stroke-none;
}

/*!* below is from shadcn-ui setup *!*/
.studio {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  /*--accent: 210 40% 96.1%;*/
  /*--accent-foreground: 222.2 47.4% 11.2%;*/
  /*--accent-pressed: 210 40% 85%;*/

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;

  --radius: 0.5rem;
}

.dark .studio {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;

  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;

  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;

  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;

  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;

  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --accent-pressed: 217.2 32.6% 26.5%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: hsl(212.7, 26.8%, 83.9);
}

.studio * {
  @apply border-border;
}

.studio {
  @apply bg-background text-foreground;
}

.monaco-hover {
  max-width: 500px !important;
  z-index: 500;
}
