/* -- Autocomplete Styling -- */
@reference "../../css/globals.css";

#root {
  /* Base styling for autocomplete container */
  .cm-tooltip-autocomplete {
    /* CodeMirror's default is too wide. */
    max-width: 250px;
    @apply bg-popover shadow-md border border-border;
  }

  /* Autocomplete list */
  .cm-tooltip-autocomplete > ul {
    @apply max-h-[300px] overflow-y-auto;
    scrollbar-width: thin;
    min-width: unset;
  }

  /* Autocomplete list items */
  .cm-tooltip-autocomplete > ul > li {
    padding: 0;
    padding-right: 6px;
    height: 18px;
    min-width: 60px;
    @apply flex items-center gap-2 cursor-pointer;
  }

  .cm-completionLabel {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 12px;
    @apply text-xs font-mono;
  }

  .cm-completionDetail {
    flex-grow: 1;
    text-align: right;
  }

  .cm-tooltip-autocomplete > ul > completion-section {
    @apply text-xs bg-muted-foreground/10 border-y border-border;
  }

  /* Hover state for list items */
  .cm-tooltip-autocomplete > ul > li:hover {
    background-color: var(--blue-3);
  }

  /* Selected item in autocomplete */
  .cm-tooltip-autocomplete > ul > li[aria-selected] {
    background-color: var(--blue-4);
    color: var(--blue-12);
  }

  /* Completion icons container */
  .cm-completionIcon {
    width: 1rem;
    height: 100%;
    flex-shrink: 0;
    line-height: 18px;
    font-weight: bold;
    opacity: 0.9;
    padding: 0 1px;
    /* Default colors */
    color: var(--gray-11);
    background-color: var(--gray-3);

    @apply flex items-center justify-center font-medium;

    /* Default styling for completion icons */
    &::after {
      content: "•"; /* Default bullet point for unknown types */
    }
  }

  .cm-completionIcon-variable {
    color: var(--blue-11);
    background-color: var(--blue-3);

    &::after {
      content: "𝑣"; /* Italic small v for variables */
    }
  }

  .cm-completionIcon-property {
    color: var(--lime-11);
    background-color: var(--lime-3);

    &::after {
      content: "≡"; /* Identical to symbol for properties */
    }
  }

  .cm-completionIcon-method {
    color: var(--amber-11);
    background-color: var(--amber-3);

    &::after {
      content: "⚙"; /* Gear symbol for methods */
    }
  }

  .cm-completionIcon-function {
    color: var(--purple-11);
    background-color: var(--purple-3);

    &::after {
      content: "ƒ"; /* Function symbol for functions */
    }
  }

  .cm-completionIcon-class {
    color: var(--orange-11);
    background-color: var(--orange-3);

    &::after {
      content: "C"; /* Capital C for classes */
    }
  }

  .cm-completionIcon-module {
    color: var(--grass-11);
    background-color: var(--grass-3);

    &::after {
      content: "⧉"; /* Interlocking squares for modules */
    }
  }

  .cm-completionIcon-statement {
    color: var(--red-11);
    background-color: var(--red-3);

    &::after {
      content: "§"; /* Section symbol for statements */
    }
  }

  .cm-completionIcon-keyword {
    color: var(--cyan-11);
    background-color: var(--cyan-3);

    &::after {
      content: "⌘"; /* Command symbol for keywords */
    }
  }

  .cm-completionIcon-reference {
    color: var(--gray-11);
    background-color: var(--gray-3);

    &::after {
      content: "→"; /* Right arrow for references */
    }
  }

  .cm-completionIcon-file {
    color: var(--crimson-11);
    background-color: var(--crimson-3);

    &::after {
      content: "𝌆"; /* File symbol for files */
    }
  }

  .cm-completionIcon-table {
    color: var(--gray-11);
    background-color: var(--gray-3);

    &::after {
      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1kYXRhYmFzZS1pY29uIGx1Y2lkZS1kYXRhYmFzZSI+PGVsbGlwc2UgY3g9IjEyIiBjeT0iNSIgcng9IjkiIHJ5PSIzIi8+PHBhdGggZD0iTTMgNVYxOUE5IDMgMCAwIDAgMjEgMTlWNSIvPjxwYXRoIGQ9Ik0zIDEyQTkgMyAwIDAgMCAyMSAxMiIvPjwvc3ZnPg=="); /* Database icon for tables */
    }
  }

  .cm-completionIcon-dataframe {
    color: var(--gray-11);
    background-color: var(--gray-3);

    &::after {
      content: "𝌆"; /* Dataframe icon for tables */
    }
  }

  .cm-completionIcon-error {
    color: var(--red-11);
    background-color: var(--red-3);

    &::after {
      content: "𝑒"; /* Italic e for errors */
    }
  }

  .cm-completionIcon-datasource {
    color: var(--purple-11);
    background-color: var(--purple-3);

    &::after {
      content: "⚙"; /* Gear icon for datasources */
    }
  }

  /* Completion info tooltip */
  .cm-completionInfo {
    @apply max-w-md border-l border-border;
  }

  .cm-completionDetail {
    font-style: normal;
    @apply text-xs text-muted-foreground;
  }

  /* Completion matching text highlight */
  .cm-completionMatchedText {
    @apply text-accent-foreground font-medium underline underline-offset-2;
  }

  /* Scrollbar styling for autocomplete list */
  .cm-tooltip-autocomplete > ul::-webkit-scrollbar {
    width: 6px;
  }

  .cm-tooltip-autocomplete > ul::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  .cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/30 rounded-full;
  }

  .cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
  }

  /* Copilot and AI completion styling */
  .cm-tooltip-autocomplete > ul > li.cm-ai-completion {
    @apply border-l-2 border-green-500;
  }

  .cm-tooltip.cm-completionInfo {
    /* Codemirror generates an inline style for these properties,
      * so we have to override them with !important. */
    top: -1px !important;

    /* CodeMirror's default of 400px is often too small. */
    max-width: 36rem !important;
  }

  .cm-completionInfo.cm-completionInfo-right-narrow {
    /* CodeMirror's default makes the completionInfo overlap with the
      * completion symbol */
    left: 100%;
  }

  /* Completion Info may show up to the left or right of another menu item.
    First is the parent (completion list)
    Second is the child (completion info) */
  .cm-tooltip:has(.cm-completionInfo-left),
  .cm-tooltip.cm-completionInfo-right {
    border-top-left-radius: 0;
  }

  .cm-tooltip:has(.cm-completionInfo-right),
  .cm-tooltip.cm-completionInfo-left {
    border-top-right-radius: 0;
  }
}

.cm-signature-help {
  max-width: 550px !important;
  margin-right: 16px !important;
  overflow-y: auto;
  max-height: 330px;
  padding: 0.5rem !important;
  scrollbar-width: thin;
  line-height: normal;
  @apply bg-popover shadow-md border border-border rounded-md text-sm py-1 px-2 font-prose;

  /* Paragraphs */
  & p {
    padding: 0.4rem 0;
    white-space: pre-wrap;
  }

  /* Lists */
  & ul,
  & ol,
  & li {
    white-space: initial;
  }

  & ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
  }

  & ul {
    list-style-type: disc;
    padding-left: 1.5rem;
  }

  /* Headings */
  & h1,
  & h2 {
    font-weight: 600;
    @apply text-base border-b pb-1 mb-1 text-primary;
  }

  & h3,
  & h4 {
    @apply text-sm font-semibold mt-2 mb-1;
  }

  /* Definition lists */
  & dt {
    @apply font-bold;
  }

  & dt span {
    @apply font-normal;
  }

  /* Inline code */
  & code {
    @apply border px-1 rounded font-mono bg-[var(--slate-2)] text-xs;
  }

  & code:empty {
    display: none;
  }

  /* Code blocks */
  & pre > code {
    width: 100%;
    display: inline-block;
    @apply p-2 mb-1;
  }

  /* Tables */
  & table {
    @apply text-sm border rounded my-2;
  }

  & table th,
  & table td {
    @apply border p-2;
  }

  & table th {
    @apply bg-[var(--slate-2)];
  }

  & table tr:nth-child(2n) {
    @apply bg-[var(--slate-1)];
  }

  /* Blockquotes */
  & blockquote {
    white-space: pre-wrap;
    @apply pl-2 ml-2;
  }

  & blockquote p {
    padding: 0;
    white-space: normal;
    font-weight: initial;
    @apply text-xs font-mono;
  }

  /* Class selectors (higher specificity) */

  /* Signature line styling */
  .cm-signature {
    @apply text-xs p-2 rounded-sm font-mono bg-muted;
  }

  .cm-signature-active-param {
    @apply font-bold text-primary;
  }

  .section {
    line-height: normal;
  }

  .paragraph {
    white-space: initial;
  }

  /* Docutils (Python docstring classes) */
  .docutils p,
  .docutils dd {
    white-space: initial;
  }

  .docutils dd {
    white-space: pre-wrap;
    padding-left: 1rem;
  }

  .docutils.literal {
    @apply bg-[var(--slate-2)] px-1 border rounded-md text-xs font-mono;
  }

  /* Doctest and literal blocks */
  .doctest-block,
  .literal-block {
    white-space: pre-wrap;
    @apply bg-[var(--slate-2)] p-2 rounded text-xs;
  }

  .codehilite code {
    width: 100%;
    display: inline-block;
    white-space: pre-wrap;
    @apply bg-[var(--slate-2)] border p-2 rounded-md font-mono text-xs;
  }

  blockquote dl.docutils,
  blockquote .docutils dt {
    padding: 0;
    white-space: normal;
    font-weight: initial;
    @apply text-xs font-mono;
  }
}

.cm-signature-docs {
  color: black !important;
}

.dark .cm-signature-docs {
  color: white !important;
}