/**
* Module: Override imported components CSS styling.
*/
@import './constants.css';
@import './reactflow.css';

/* stylelint-disable selector-class-pattern */

:root {
  /* Toastify */
  --toastify-color-dark: var(--color-secondary);

  --toastify-toast-width: 20rem;
  --toastify-toast-padding: 0.75rem;

  --toastify-toast-min-height: 0;
  --toastify-toast-max-height: 40rem;
}

/* Light Theme */
/* prettier-ignore */
:not(.dark):root {
  /* React Tooltip */
  --rt-color-white:   var(--color-input);
  --rt-color-dark:    var(--color-foreground);

}

/* Dark Theme */
/* prettier-ignore */
.dark:root {
  /* React Tooltip */
  --rt-color-white:   var(--color-foreground);
  --rt-color-dark:    var(--color-input);
}

/* ----- Code Mirror ------ */

.cm-tooltip {
  z-index: 100;

  border-color: var(--color-border);
  border-width: 1px;
  border-radius: 0.25rem;
}

.cm-selectionBackground {
  background: highlight !important;
}

.cm-content ::selection {
  background: highlight !important;
  color: highlighttext !important;
}

.cm-editor {
  resize: vertical;
  overflow-y: auto;
  overscroll-behavior-y: contain;

  border-color: var(--color-border);
  border-width: 1px;
  border-radius: 0.25rem;

  padding: 0.15rem 0.375rem;
}

.cm-editor.cm-focused {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
}

.cm-editor .cm-placeholder {
  font-family: var(--font-main);
  color: var(--color-muted-foreground);
  user-select: none;
}