@reference "../globals.css";

.light .cm-selectionBackground {
  /* This is the background for selected text when focused,
  but we want to use it when not in focus either because we
  will often lose focus during find/replace or in another editor */
  background-color: #d7d4f0 !important;
}

.dark .cm-selectionBackground {
  background-color: #1177cc80 !important;
}

.cm-focused.cm-focused {
  outline: none;
}

/* -- Gutters -- */

.cm .cm-gutters {
  @apply bg-background;

  /* Style line numbers. */
  font-size: 0.75rem;
  color: var(--gray-10);
}

.dark .cm .cm-gutters {
  background-color: transparent;
}

.marimo-cell .cm-scroller {
  /* this needs to be visible to show RTC cursors and inline AI edit buttons */
  overflow: visible;
}

/* -- Tooltips: code completion and type hints -- */

#root .cm-tooltip {
  border-radius: 4px;
  z-index: 1000;

  @apply bg-popover shadow-sm shadow-shade border-border;
}

/*
 First selector is when there is a tooltip by hover
 Second selector is when there is tooltip by cursor
 Third selector is during code completion */
#root .cm-tooltip.cm-tooltip-hover,
#root .cm-tooltip.mo-cm-tooltip,
#root .cm-tooltip.cm-completionInfo {
  max-height: 45vh; /* 45% of viewport height */
  max-width: 40vw; /* 40% of viewport width */
  overflow: auto;
  scrollbar-width: thin;

  /* Respect newlines. */
  border-radius: 4px;
}

/* Hover tooltips get highest priority in display. */
#root .cm-tooltip.cm-tooltip-hover {
  z-index: 1000;
}

/* -- Panels -- */

.cm .cm-panels {
  background-color: var(--cm-background);
  color: var(--sky-11);
  font-weight: 700;

  /* room for buttons */
  margin-right: 30px;

  @apply text-xs;

  &.cm-panels-bottom {
    border-top: 1px solid var(--border);
  }
}

/* -- Linting -- */

.cm-tooltip-lint {
  @apply text-sm;

  code {
    @apply bg-muted border border-border rounded-md px-1;
  }

  .cm-diagnosticText > div {
    display: inline-flex;
  }
}

/* -- Ghost Text -- */

.cm-ghostText,
.cm-ghostText * {
  opacity: 0.6;
  filter: grayscale(20%);
  cursor: pointer;
}

.cm-ghostText:hover {
  background: var(--gray-3);
}

/* -- Codeium -- */

.cm-codeium-cycle {
  font-size: 9px;
  background-color: var(--sky-3);
  padding: 2px;
  border-radius: 2px;
  display: inline-block;
}

.cm-codeium-cycle-key {
  font-size: 9px;
  font-family: monospace;
  display: inline-block;
  padding: 2px;
  border-radius: 2px;
  border: none;
  background-color: var(--sky-7);
  margin-left: 5px;
}

.cm-codeium-cycle-key:hover {
  background-color: var(--sky-9);
}

.cm-codeium-cycle-explanation {
  font-family: monospace;
  display: inline-block;
  padding: 2px;
}