.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.
 */
.emoji-picker-popup {
  position: fixed;

  z-index: 9999;

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


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


.emoji-picker-popup emoji-picker {
  display: block;

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

  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;
}