css/suggestion-popover.less
@system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
  'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;

@monospace: 'IBM Plex Mono', 'Source Code Pro', Consolas, 'Roboto Mono', Menlo,
  'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;

/* The element that display info while in latex mode */
#mathlive-suggestion-popover {
  --_suggestion-zindex: var(--suggestion-zindex, 100);
  background-color: rgba(97, 97, 97);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  position: fixed;
  z-index: var(--_suggestion-zindex);

  display: none;
  flex-direction: column;
  justify-content: center;

  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

#mathlive-suggestion-popover.top-tip::after  {
  content: '';
  position: absolute;
  top: -15px;
  left: calc(50% - 15px);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid rgba(97, 97, 97);

  font-size: 1rem;
}

#mathlive-suggestion-popover.bottom-tip::after  {
  content: '';
  position: absolute;
  bottom: -15px;
  left: calc(50% - 15px);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgba(97, 97, 97);

  font-size: 1rem;
}



#mathlive-suggestion-popover.is-animated {
  transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  animation: ML__fade-in cubic-bezier(0, 0, 0.2, 1) 0.15s;
}

#mathlive-suggestion-popover.is-visible {
  display: flex;
}
@keyframes ML__fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The wrapper class for the entire content of the popover panel */

#mathlive-suggestion-popover ul {
  display: flex;
  flex-flow: column;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  max-height: 400px;
  overflow-y: auto;
}

#mathlive-suggestion-popover li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 8px;
  padding: 8px;
  width: calc(100% - 16px - 16px); // minus 2*margin minus 2 * padding
  column-gap: 1em;

  border-radius: 8px;
  cursor: pointer;

  a {
    color: #5ea6fd;
    padding-top: 0.3em;
    margin-top: 0.4em;
    display: block;
    &:hover {
      color: #5ea6fd;
      text-decoration: underline;
    }
  }
  /* Since the content can be clicked on, provide feedback on hover */
  &:hover,
  &.is-pressed,
  &.is-active {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* The command inside a popover (inside a #mathlive-suggestion-popover) */
.ML__popover__command {
  font-size: 1.6rem;
  font-family: KaTeX_Main;
}

.ML__popover__current {
  background : #5ea6fd;
  color: #fff;
}

.ML__popover__latex {
  font-family: @monospace;
  align-self: center;
}

/* The keyboard shortcuts for a symbol as displayed in the popover */
.ML__popover__keybinding {
  font-family: @system;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Style for the character that joins the modifiers of a keyboard shortcut 
(usually a "+" sign)*/
.ML__shortcut-join {
  opacity: 0.5;
}
