@keyframes moveUpAndFadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 15px, 0);
    // Make sure that we can't interact with the component while it is animated
    pointer-events: none;
  }

  100% {
    opacity: 1;
    pointer-events: none;
  }
}

.reactionsBar {
  animation: moveUpAndFadeIn 150ms;
  background-color: var(--bp4MenuBg);
  border-radius: 25px;
  box-shadow:
    0 0 0 1px rgba(16, 22, 26, 0.1),
    0 2px 4px rgba(16, 22, 26, 0.2),
    0 8px 24px rgba(16, 22, 26, 0.2);
  display: flex;
  padding-bottom: 4px;
  padding-inline-start: 5px;
  padding-inline-end: 5px;
  padding-top: 4px;
}

.reactionsBarButton {
  align-items: center;
  animation: moveUpAndFadeIn 250ms;
  background-color: transparent;
  border-radius: 50%;
  border: 0;
  display: flex;
  height: 40px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 40px;

  & ~ & {
    margin-inline-start: 2px;
  }

  &.isFromSelf {
    background-color: var(--chatListItemBgHover);
  }

  &.showAllEmojis {
    background-color: var(--chatListItemBgHover);
    color: var(--bp4MenuText);
  }
}

.reactionsBarEmoji {
  font-size: 25px;
  margin-inline-start: 2px;
  margin-top: 3px;
  transition: transform cubic-bezier(0, 0, 0, 1) 200ms;
}

.reactionsBarButton {
  &:hover {
    .reactionsBarEmoji {
      transform: scale(1.25) translate3d(0, -5px, 0);
    }
  }
}

.showAllIcon {
  background-color: rgb(120, 120, 120);
}

.reactionsBarPicker {
  box-shadow:
    0 0 0 1px rgba(16, 22, 26, 0.1),
    0 2px 4px rgba(16, 22, 26, 0.2),
    0 8px 24px rgba(16, 22, 26, 0.2);
}
