popover.background.emoji-picker > contents {
  padding: 0;
}

.emoji-searchbar {
  padding: 6px;
  border-bottom: 1px solid $borders_color;
}

.emoji-toolbar {
  // flowbox children already have 3px padding, so we only need 3px more to
  // get the regular 6px. We also don't need spacing, for the same reason.
  padding: 3px;
  border-top: 1px solid $borders_color;
}

button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action) {
  @extend %circular_button;
  @extend %button_basic_flat;

  min-width: 32px;
  min-height: 32px;
}

popover.emoji-picker emoji {
  font-size: x-large;
  padding: 6px;
  border-radius: 6px;

  &:focus,
  &:hover {
    background: $view_selected_color;

    &:active {
      background: $view_active_color;
    }
  }
}

// Emoji completion popover

popover.background.emoji-completion > contents {
  padding: $menu_margin;
  padding-bottom: $menu_margin - 2px;
}

emoji-completion-row {
  // emoji extends quite a bit into the padding, so we can't use the same padding on all sides
  padding: $menu_padding - 6px;
  margin-bottom: 2px;
  border-radius: $menu_radius;

  &:dir(ltr) { padding-right: $menu_padding; }
  &:dir(rtl) { padding-left: $menu_padding; }

   > box {
    border-spacing: $menu_padding - 6px;
  }

  &:focus,
  &:hover {
    background-color: $view_selected_color;
    color: $text-color;

    &:active {
      background-color: $view_active_color; // matching buttons
    }
  }
}
