modeling-app/src/index.css

@import './colors.css';

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

body {
  margin: 0;
  @apply font-sans;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply text-chalkboard-110;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-chalkboard-20) var(--color-chalkboard-40);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-display;
}

.body-bg {
  @apply bg-chalkboard-10;
}

.body-bg.dark,
.dark .body-bg {
  @apply bg-chalkboard-100;
}

body.dark {
  scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
  @apply text-chalkboard-10;
}

select {
  @apply bg-chalkboard-20;
}

.dark select {
  @apply bg-chalkboard-90;
}

::-webkit-scrollbar {
  @apply w-2 h-2 rounded-sm;
  @apply bg-chalkboard-20;
}

::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-40 rounded-sm;
}

.dark ::-webkit-scrollbar {
  @apply bg-chalkboard-90;
}

.dark ::-webkit-scrollbar-thumb {
  @apply bg-chalkboard-70;
}

button {
  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs focus-visible:ring-energy-10;
}

button:hover {
  @apply border-chalkboard-40 bg-energy-10/20;
}

.dark button {
  @apply border-chalkboard-70 focus-visible:ring-energy-10/50;
}

.dark button:hover {
  @apply border-chalkboard-60;
}

button:disabled {
  @apply cursor-not-allowed bg-chalkboard-20 text-chalkboard-60 border-chalkboard-20;
}

.dark button:disabled {
  @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
}

a:not(.action-button) {
  @apply text-energy-70 hover:text-energy-60 underline;
}

.dark a:not(.action-button) {
  @apply text-energy-20 hover:text-energy-10;
}

input {
  @apply selection:bg-energy-10/50;
}

.dark input {
  @apply selection:bg-energy-10/40;
}

.mono {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.full-height-subtract {
  --height-subtract: 2.25rem;
  height: 100%;
  max-height: calc(100% - var(--height-subtract));
}

#code-mirror-override .cm-editor {
  @apply h-full bg-transparent;
}

#code-mirror-override .cm-scroller {
  @apply h-full;
}

#code-mirror-override .cm-scroller::-webkit-scrollbar {
  @apply h-0;
}

#code-mirror-override .cm-activeLine,
#code-mirror-override .cm-activeLineGutter {
  @apply bg-liquid-10/50;
}

.dark #code-mirror-override .cm-activeLine,
.dark #code-mirror-override .cm-activeLineGutter {
  @apply bg-liquid-80/50;
}

#code-mirror-override .cm-gutters {
  @apply bg-chalkboard-10/30;
}

.dark #code-mirror-override .cm-gutters {
  @apply bg-chalkboard-110/50;
}

#code-mirror-override .cm-focused .cm-cursor {
  width: 0px;
}
#code-mirror-override .cm-cursor {
  display: block;
  width: 1ch;
  @apply bg-liquid-40 mix-blend-multiply;

  animation: blink 2s ease-out infinite;
}

.dark #code-mirror-override .cm-cursor {
  @apply bg-liquid-50;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
}

.react-json-view {
  @apply bg-transparent !important;
}

#code-mirror-override .cm-tooltip {
  @apply text-xs shadow-md;
  @apply bg-chalkboard-10 text-chalkboard-80;
  @apply rounded-sm border-solid border border-chalkboard-40/30 border-l-liquid-10;
}

.dark #code-mirror-override .cm-tooltip {
  @apply bg-chalkboard-110 text-chalkboard-40;
  @apply border-chalkboard-70/20 border-l-liquid-70;
}

#code-mirror-override .cm-tooltip-hover {
  @apply py-1 px-2 w-max max-w-md;
}

#code-mirror-override .cm-completionInfo {
  @apply px-4 rounded-l-none;
  @apply bg-chalkboard-10 text-liquid-90;
  @apply border-liquid-40/30;
}

.dark #code-mirror-override .cm-completionInfo {
  @apply bg-liquid-120 text-liquid-50;
  @apply border-liquid-90/60;
}

#code-mirror-override .cm-tooltip-autocomplete li {
  @apply px-2 py-1;
}
#code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
  @apply bg-liquid-10 text-liquid-110;
}
.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected='true'] {
  @apply bg-liquid-100 text-liquid-20;
}

#code-mirror-override .cm-content {
  white-space: pre-wrap;
  word-break: normal;
  word-wrap: break-word;
}

.cm-ghostText,
.cm-ghostText * {
  color: rgb(120, 120, 120, 0.8) !important;
}