.emoji-suggestions {
  position: fixed;
  z-index: 90;
  display: grid;
  gap: 0.2rem;
  width: min(18rem, calc(100vw - 1rem));
  max-height: min(17rem, calc(100vh - 1rem));
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 36px color-mix(in srgb, #111827 18%, transparent);
  direction: ltr;
}

.emoji-suggestions[hidden] {
  display: none;
}

.emoji-suggestion {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.45rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.emoji-suggestion.is-active,
.emoji-suggestion:hover {
  background: var(--subtle);
}

.emoji-suggestion-symbol {
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.emoji-suggestion-name {
  overflow: hidden;
  direction: ltr;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typora-editor .md-emoji {
  display: inline-block;
  vertical-align: baseline;
}

.typora-editor .md-emoji-source {
  display: none;
}

.typora-editor .md-emoji-rendered {
  display: inline-block;
  line-height: 1;
}

.typora-editor .md-emoji.is-caret .md-emoji-source {
  display: inline;
}

.typora-editor .md-emoji.is-caret .md-emoji-rendered {
  display: none;
}