@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;
}

/* We hide the cursor if the user has turned off the textEditor.blinkingCursor setting
 * any elements that could present a blinking cursor to the user
*/
input,
textarea,
*[contenteditable] {
  caret-color: var(--cursor-color, auto);
}

::-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-primary;
}

button:hover {
  @apply border-chalkboard-40 bg-primary/5;
}

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

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

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

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

a {
  @apply text-primary underline hover:hue-rotate-15;
}

.dark a {
  @apply hover:brightness-110 hover:hue-rotate-0;
}

a.action-button,
.dark a.action-button {
  @apply text-inherit no-underline hover:hue-rotate-0;
}

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

.dark input {
  @apply selection:bg-primary/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;
}

/*
 * The first descendent of the CodeMirror wrapper is the theme,
 * but its identifying class can change depending on the theme.
*/
#code-mirror-override > div,
#code-mirror-override .cm-editor {
  @apply bg-transparent h-full;
}

#code-mirror-override .cm-scroller {
  overflow: auto;
}

#code-mirror-override .cm-gutter {
  @apply select-none;
}

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

.dark #code-mirror-override .cm-activeLine,
.dark #code-mirror-override .cm-activeLineGutter {
  @apply bg-primary/20;
  mix-blend-mode: lighten;
}

#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-content {
  @apply caret-primary;
}
.dark #code-mirror-override .cm-content {
  @apply caret-chalkboard-10;
}

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

.dark #code-mirror-override .cm-cursor {
  @apply border-l-chalkboard-10;
}

#code-mirror-override.blink .cm-cursor {
  animation: blink 1200ms ease-out infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

.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;
}