@import url('codemirror/addon/hint/show-hint.css');

/* Popup styles */
.CodeMirror-hints {
  background: hsl(var(--color-base));
  border: var(--popover-border);
  border-radius: var(--border-radius-8);
  box-shadow: var(--popover-box-shadow);
  display: grid;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  grid-template-columns: auto fit-content(300px);
  /* By default this is equals exactly 8 items including margins */
  max-height: 264px;
  padding: 0;
}

/* Autocomplete items */
.CodeMirror-hint {
  border-radius: var(--border-radius-4);
  color: hsla(var(--color-neutral), var(--alpha-secondary));
  grid-column: 1 / 2;
  margin: var(--px-4);
  /* Override element style added by codemirror */
  padding: var(--px-6) var(--px-8) !important;

  &:not(:first-child) {
    margin-top: 0;
  }
}
li.CodeMirror-hint-active {
  background: hsla(var(--color-primary), var(--alpha-background-medium));
  color: hsl(var(--color-primary));
}

/* Sidebar with additional information */
.CodeMirror-hint-information {
  border-left: 1px solid
    hsla(var(--color-neutral), var(--alpha-background-heavy));
  grid-column: 2 / 3;
  grid-row: 1 / 99999;
  /* Same as the popup as a whole minus padding */
  max-height: calc(264px - 2 * var(--px-12));
  overflow: auto;
  padding: var(--px-12);
}
.CodeMirror-hint-information-header {
  display: flex;
  align-items: baseline;
}
.CodeMirror-hint-information-field-name {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
}
.CodeMirror-hint-information-type-name-pill {
  border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
  border-radius: var(--border-radius-4);
  color: hsla(var(--color-neutral), var(--alpha-secondary));
  margin-left: var(--px-6);
  padding: var(--px-4);
}
.CodeMirror-hint-information-type-name {
  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: underline dotted;
  }
}
.CodeMirror-hint-information-description {
  color: hsla(var(--color-neutral), var(--alpha-secondary));
  margin-top: var(--px-12);
}