// NOTE: This is NOT a child of .editor
.CodeMirror-hints {
  border: 0;
  padding: 0;
  margin: 0.2em 0 0;
  background: var(--color-bg);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
  min-width: 20rem;
  max-width: 40rem;
  max-height: 19rem;
  z-index: 999999; // So it shows up anywhere (modals)

  li.CodeMirror-hint {
    position: relative;
    color: var(--color-font);
    padding: 0 !important; // ugh
    border-radius: 0;
    display: grid;
    grid-template-columns: var(--line-height-xxs) auto minmax(0, 0);
    background: var(--color-bg);
    font-size: var(--font-size-xs);

    &.type--variable {
      .label {
        background: var(--color-surprise);
        color: var(--color-font-surprise);
      }
    }

    &.type--tag {
      .label {
        background: var(--color-info);
        color: var(--color-font-info);
      }
    }

    &.type--constant {
      .label {
        background: var(--color-success);
        color: var(--color-font-success);
      }
    }

    &.type--snippet {
      .label {
        background: var(--color-notice);
        color: var(--color-font-notice);
      }
    }

    &:not(.fancy-hint)::before {
      margin-left: calc(var(--padding-sm) * -1);
      content: '\1d43a';
      background: var(--color-warning);
      color: var(--color-font-warning);
    }

    &:not(.fancy-hint),
    .name,
    .value,
    .label {
      min-height: 100%;
      line-height: var(--line-height-xxs);
      padding: 0 var(--padding-sm) !important;
      margin: 0;
      box-sizing: border-box;
    }

    &:not(.fancy-hint),
    .name,
    .value {
      background: var(--color-bg);
      font-family: var(--font-monospace) !important;

      // Ellipsis when too long
      width: 100%;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .value {
      text-align: right;
      padding-left: var(--padding-lg);
      font-style: italic;
      font-size: 0.9em;
    }

    &:not(.fancy-hint)::before,
    .label {
      opacity: 0.8;
      font-size: var(--font-size-sm);
      font-family: var(--font-default);
      text-align: center;
      width: var(--line-height-xxs);
    }

    &:hover,
    &.CodeMirror-hint-active {
      background: var(--hl-xs);

      .label {
        opacity: 1;
      }

      .name,
      .value {
        background: var(--hl-xs);
      }
    }
  }
}