.emoji-picker-field {
  position: relative;
}


/*
 * Nur auf Desktop Platz für
 * das Smiley-Icon reservieren.
 */
@media (min-width: 768px) {
  .emoji-picker-field > textarea {
    padding-right: 3rem;
  }
}


/*
 * Smiley rechts oben im Textfeld.
 *
 * Die Responsive-Sichtbarkeit selbst
 * erfolgt im Template ausschließlich über:
 *
 * hidden md:block
 */
.emoji-picker-ui {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
}


.emoji-picker-toggle {
  display: flex;

  width: 2rem;
  height: 2rem;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;
  border-radius: 0.5rem;

  background: transparent;

  color: rgba(0, 0, 0, 0.30);

  cursor: pointer;

  transition:
    background-color 150ms ease,
    color 150ms ease;
}


.emoji-picker-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.50);
}


.emoji-picker-toggle:focus {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 1px;
}


.emoji-picker-icon {
  display: block;

  width: 1.25rem;
  height: 1.25rem;
}


/*
 * Das Popup wird beim Öffnen durch JavaScript
 * direkt unter document.body verschoben.
 *
 * Dadurch wird es nicht durch overflow:hidden
 * eines Forum-Containers abgeschnitten.
 *
 * Die Breite liegt jetzt am gemeinsamen Popup,
 * damit Favoritenbereich und normaler Picker
 * exakt dieselbe Breite verwenden.
 */
.emoji-picker-popup {
  position: fixed;

  z-index: 9999;

  width:
    min(
      340px,
      calc(100vw - 24px)
    );

  filter:
    drop-shadow(
      0 12px 24px rgba(0, 0, 0, 0.14)
    );
}


.emoji-picker-popup.is-hidden {
  display: none;
}


/*
 * ============================================================
 * Eigener erster Emoji-Bereich
 * ============================================================
 *
 * Wird durch emoji-picker-favorites.js.php
 * direkt vor dem normalen <emoji-picker>
 * in dasselbe Popup eingesetzt.
 *
 * Es handelt sich ausschließlich um native
 * Unicode-Emojis.
 */
.ln-emoji-favorites {
  box-sizing: border-box;

  width: 100%;

  margin: 0;
  padding: 0.625rem 0.625rem 0.75rem;

  border:
    1px solid
    rgba(0, 0, 0, 0.10);

  border-bottom: 0;

  border-radius:
    0.75rem
    0.75rem
    0
    0;

  background: #ffffff;

  color: var(--color-custom-ink);
}


/*
 * Markierung des ersten Bereichs.
 *
 * Sichtbarer Inhalt:
 * ✨
 */
.ln-emoji-favorites__tab {
  display: flex;

  min-height: 1.75rem;

  align-items: center;

  margin:
    0
    0
    0.375rem;

  padding:
    0
    0.125rem
    0.3rem;

  border-bottom:
    2px solid
    var(--color-accent-500);

  font-size: 1rem;
  line-height: 1;
}


/*
 * Gleiche Spaltenanzahl wie
 * beim normalen Emoji-Picker.
 */
.ln-emoji-favorites__grid {
  display: grid;

  grid-template-columns:
    repeat(
      8,
      minmax(0, 1fr)
    );

  gap: 0.1875rem;
}


/*
 * Native Unicode-Emojis.
 *
 * Keine Bilder.
 * Keine SVG-Custom-Emojis.
 * Keine customEmoji-API.
 */
.ln-emoji-favorites__emoji {
  appearance: none;

  display: flex;

  width: 100%;
  min-width: 0;
  height: 2rem;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0.375rem;

  background: transparent;

  color: inherit;

  cursor: pointer;

  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;

  font-size: 1.5rem;
  line-height: 1;

  transition:
    background-color 120ms ease,
    transform 120ms ease;
}


.ln-emoji-favorites__emoji:hover {
  background: var(--color-brand-10);
}


.ln-emoji-favorites__emoji:active {
  transform: scale(0.94);
}


.ln-emoji-favorites__emoji:focus-visible {
  outline:
    2px solid
    var(--color-accent-500);

  outline-offset: 1px;
}


/*
 * Der normale emoji-picker-element
 * beginnt direkt unter dem eigenen
 * Favoritenbereich.
 *
 * Die Library selbst bleibt vollständig
 * unverändert.
 */
.emoji-picker-popup emoji-picker {
  display: block;

  width: 100%;

  height: 390px;

  --background: #ffffff;
  --border-color: rgba(0, 0, 0, 0.10);

  --input-border-color: rgba(0, 0, 0, 0.10);
  --input-font-color: var(--color-custom-ink);

  --button-active-background: var(--color-brand-10);
  --button-hover-background: var(--color-brand-10);

  --indicator-color: var(--color-accent-500);
  --outline-color: var(--color-accent-500);

  --emoji-size: 1.5rem;
  --num-columns: 8;
}