/*
 * Emoji — Twemoji images, the emoji picker popover and :shortcode: suggestions.
 * Used by posts, replies, chat and moods.
 */

/* Twemoji <img> inline with text (twemoji controller). */
img.emoji {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.2em;
}

/* ---- Picker (emoji-picker-element, built by the emoji controller) ---- */

emoji-picker.emoji-popover {
  position: fixed;
  z-index: 1000;
  --background: var(--color-card-raised);
  --border-color: var(--color-border);
  --border-radius: var(--radius-comfortable);
  --button-active-background: var(--color-selection);
  --button-hover-background: var(--color-selection);
  --category-font-color: var(--color-comment);
  --indicator-color: var(--color-purple);
  --input-border-color: var(--color-border);
  --input-font-color: var(--color-foreground);
  --input-placeholder-color: var(--color-comment);
  --outline-color: var(--color-purple);
  --emoji-size: 1.35rem;
  --num-columns: 8;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-dialog);
}

/* The element's own :host display would beat the UA [hidden] rule. */
emoji-picker[hidden] {
  display: none;
}

/* ---- :shortcode: suggestions (emoji-shortcodes controller) ---- */

.emoji-suggest {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background-color: var(--color-card-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-dialog);
}

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

.emoji-suggest__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-subtle);
  cursor: pointer;
}

.emoji-suggest__option[aria-selected="true"],
.emoji-suggest__option:hover {
  background-color: var(--color-selection);
}

.emoji-suggest__emoji {
  font-size: 1.15rem;
  line-height: 1;
}

.emoji-suggest__code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}