insomnia/app/ui/css/editor/hints.less

@import '../constants/colors';
@import '../constants/animations';
@import '../constants/dimensions';
@import '../constants/fonts';

// 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: @line-height-xxs auto minmax(0, 1fr);
    background: var(--color-bg);
    font-size: @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);
      }
    }

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

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

    &:not(.fancy-hint),
    .name,
    .value {
      background: var(--color-bg);
      font-family: @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: @padding-lg;
      font-style: italic;
      font-size: 0.9em;
    }

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

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

      .label {
        opacity: 1;
      }

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