@import '../variables';
@import '../mixins';

.emoji-dialog {
  @include elegant-card;
  background: $color-white;
  box-sizing: content-box;
  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 {
    font-size: $font-size-default;
    margin: $zero;
  }

  .emoji-row {
    box-sizing: border-box;
    height: 180px;
    overflow-y: auto;
    padding: $space-small;

    .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 {
  background-color: $color-body;
  border-top-left-radius: $space-small;
  border-top-right-radius: $space-small;
  padding: $zero $space-smaller;

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

    >li {
      align-items: center;
      cursor: pointer;
      display: flex;
      height: $space-medium;
      justify-content: center;
      padding: $space-smaller $space-small;
    }

    .emojione {
      height: $space-two;
      width: $space-normal;
    }

    >.active {
      background: $color-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;
  }
}