.emoji-menu {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: fixed;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);

  display: flex;
  flex-direction: column;
  justify-content: center;

  .devider {
    margin: .5em 0;
  }
}

.emoji-menu-tabs {
  display: flex;
  justify-content: space-around;

  .emoji-menu-tab {
    width: 24px;
    height: 29px;
    background: url('/assets/emoji/IconsetSmiles.png') no-repeat;
    background-size: 42px 350px;
    border: 0;
  }

  .icon-smile { background-position: -9px -34px; }
  .icon-smile-selected { background-position: -9px -5px; }

  .icon-flower { background-position: -9px -145px; }
  .icon-flower-selected { background-position: -9px -118px; }

  .icon-bell { background-position: -9px -89px; }
  .icon-bell-selected { background-position: -9px -61px; }

  .icon-car { background-position: -9px -196px; }
  .icon-car-selected { background-position: -9px -170px; }

  .icon-grid { background-position: -9px -248px; }
  .icon-grid-selected { background-position: -9px -222px; }

  .icon-car,
  .icon-bell,
  .icon-grid,
  .icon-smile,
  .icon-flower {
    opacity: 0.7;
  }

  .icon-car:hover,
  .icon-bell:hover,
  .icon-grid:hover,
  .icon-smile:hover,
  .icon-flower:hover {
    opacity: 1;
  }
}

.emoji-items-wrap {
  max-height: 30vh;
  min-height: 30vh;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.emoji-item {
  padding: 3px;
}