.emoji-dialog {
  @include elegant-card;
  background: $color-white;
  border-radius: 2px;
  box-sizing: content-box;
  height: 20rem;
  padding-bottom: $space-two;
  position: absolute;
  right: 0;
  top: -22rem;
  width: 28.6rem;

  &::before {
    @include arrow(bottom, $color-white, $space-slab);
    bottom: -$space-slab;
    position: absolute;
    right: $space-two;
  }

  .emojione {
    @include margin($zero);
    font-size: $font-size-small;
  }

  .emoji-row {
    @include padding($space-small);
    box-sizing: border-box;
    height: 180px;
    overflow-y: scroll;
    padding-bottom: 0;

    .emoji {
      border-radius: 4px;
      display: inline-block;
      padding: 5px;
    }

    .emojione {
      cursor: pointer;
      float: left;
      margin: .6rem;
    }
  }

  .emoji-category-title {
    color: $color-heading;
    font-size: $font-size-small;
    font-weight: $font-weight-medium;
    margin: 0;
    text-transform: capitalize;
  }

  .emoji-category-heading-decoration {
    text-align: right;
  }
}

.emoji-dialog-header {
  @include padding($zero $space-smaller);
  background-color: $light-gray;
  border-top-left-radius: $space-small;
  border-top-right-radius: $space-small;

  ul {
    list-style: none;
    margin: 0;
    padding: $space-smaller 0 0;

    > li {
      @include padding($space-small $space-small);
      box-sizing: border-box;
      cursor: pointer;
      display: inline-block;
      height: 3.4rem;
      text-align: center;
    }

    > .active {
      background: $white;
      border-top-left-radius: $space-small;
      border-top-right-radius: $space-small;
    }

    img,
    svg {
      filter: grayscale(100%);
    }
  }

  .active {
    img,
    svg {
      filter: grayscale(0);
    }
  }

  > * {
    display: table-cell;
    vertical-align: middle;
  }
}

.emoji-dialog .emoji-row,
.emoji-dialog .emoji-row .emoji:hover {
  background: $color-extra-light-blue;
}