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

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

/* Select */
.select {
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background-color: hsl(204 20% 100%);
  padding-left: 1rem;
  padding-right: 1rem;
  color: hsl(204 4% 0%);
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
  color-scheme: light;
  min-width: 200px;
}

.select:hover {
  background-color: #ede9fe;
}

@media (min-width: 640px) {
  .select {
    height: 2.25rem;
    font-size: 15px;
  }
}

.select-icon {
  translate: 4px 0;
}

.popover {
  z-index: 50;
  max-height: min(var(--radix-select-content-available-height), 336px);
  border-radius: 0.5rem;
  background-color: hsl(204 20% 100%);
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.25),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  color-scheme: light;
}

.combobox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  padding-bottom: 0px;
  margin-top: -40px;
  margin-left: 12px;
  width: fit-content;
}

.combobox {
  height: 2.5rem;
  appearance: none;
  border-radius: 0.25rem;
  padding-right: 0.5rem;
  padding-left: 1.75rem;
  color: hsl(204 4% 0%);
  outline: 2px solid transparent;
  outline-offset: 2px;
  width: 500px;
}

.combobox::placeholder {
  color: hsl(0, 0%, 0%);
}

@media (min-width: 640px) {
  .combobox {
    height: 2.25rem;
    font-size: 15px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 3s linear infinite;
}

.combobox-icon {
  pointer-events: none;
  position: absolute;
  left: 0.625rem;
  color: hsl(204 4% 0% / 0.6);
}

.listbox {
  overflow-y: auto;
  padding: 0.25rem;
}

.item {
  position: relative;
  display: flex;
  height: 2.5rem;
  cursor: default;
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
  align-items: center;
  border-radius: 0.25rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  color: hsl(204 4% 0%);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.item[data-active-item] {
  background-color: #ddd6fe;
}

@media (min-width: 640px) {
  .item {
    height: 2.25rem;
    font-size: 15px;
  }
}

.item-indicator {
  position: absolute;
  left: 0.375rem;
}

/* end Select */

/* Label */

/* reset */
input {
  all: unset;
}

.LabelRoot {
  font-size: 15px;
  font-weight: 500;
  line-height: 35px;
  color: white;
}

/* End Label */

html {
  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 */
.monaco-link {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.after-hidden .editor.original,
.after-hidden .original-in-monaco-diff-editor {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.monaco-editor {
  --vscode-editor-selectionBackground: hsla(99, 100%, 61%, 0.31) !important;
}

.monaco-editor::selection {
  background: #3ac06b;
  --vscode-editor-selectionBackground: rgba(96, 96, 192, 0.5) !important;
}

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

.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 *!*/
/*@layer base {*/
/*	:root {*/
/*		--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 {*/
/*		--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);*/
/*	}*/
/*}*/

* {
  @apply border-border;
}

body {
  @apply bg-background text-foreground;
}
