.Like {
  position: relative;
  display: inline-block;
}

.Like__link {
  cursor: pointer;
}

.Emojis {
  z-index: 3;
  position: absolute;
  background-color: white;
  left: 0;
  transform: translateX(-40%);
  bottom: 120%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0.125rem;
  border-radius: 100rem;
  -webkit-transition: 0.1s 0.1s;
  transition: 0.1s 0.1s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}
.Emojis:hover,
.Like__link.js-hover ~ .Emojis,
.Like__link:hover ~ .Emojis {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  opacity: 1;
  visibility: visible;
}

.Emoji {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  width: 2rem;
  height: 2rem;
  /* color: #ffd972; */
  cursor: pointer;
  -webkit-transition-delay: 0.2s, 0.15s;
  transition-delay: 0.2s, 0.15s;
  -webkit-transition-duration: 0s, 0.15s;
  transition-duration: 0s, 0.15s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0) scale(0.3);
  transform: translate3d(0, 100%, 0) scale(0.3);
}
.Emojis:hover .Emoji,
.Like__link.js-hover + .Emojis .Emoji,
.Like__link:hover + .Emojis .Emoji {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}
.Emoji .icon {
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; */
  font-size: inherit;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: -webkit-transform 0.1s ease;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}
.Emoji:hover .icon {
  -webkit-transform: scale(1) translate3d(0, -10%, 0);
  transform: scale(1) translate3d(0, -10%, 0);
}
.Emojis:hover .Emoji:nth-of-type(1),
.Like__link:hover + .Emojis .Emoji:nth-of-type(1) {
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
}
.Emojis:hover .Emoji:nth-of-type(2),
.Like__link:hover + .Emojis .Emoji:nth-of-type(2) {
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-delay: 0.01s;
  transition-delay: 0.01s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
}
.Emojis:hover .Emoji:nth-of-type(3),
.Like__link:hover + .Emojis .Emoji:nth-of-type(3) {
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0.02s;
  transition-delay: 0.02s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
}
.Emojis:hover .Emoji:nth-of-type(4),
.Like__link:hover + .Emojis .Emoji:nth-of-type(4) {
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-delay: 0.03s;
  transition-delay: 0.03s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
}
.Emojis:hover .Emoji:nth-of-type(5),
.Like__link:hover + .Emojis .Emoji:nth-of-type(5) {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.04s;
  transition-delay: 0.04s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
}
.Emojis:hover .Emoji:nth-of-type(6),
.Like__link:hover + .Emojis .Emoji:nth-of-type(6) {
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
}

.Emojis:hover .Emoji:nth-of-type(7),
.Like__link:hover + .Emojis .Emoji:nth-of-type(7) {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2.2);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2.2);
}

.Emojis:hover .Emoji:nth-of-type(8),
.Like__link:hover + .Emojis .Emoji:nth-of-type(8) {
  -webkit-transition-duration: 0.45s;
  transition-duration: 0.45s;
  -webkit-transition-delay: 0.07s;
  transition-delay: 0.07s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2.4);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2.4);
}

.Emojis:hover .Emoji:nth-of-type(9),
.Like__link:hover + .Emojis .Emoji:nth-of-type(9) {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 0.08s;
  transition-delay: 0.08s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2.6);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2.6);
}

.icon--like {
  color: #5890ff;
}

.icon--love {
  color: #f25268;
}
