:root {
    --emoji-size: 24px;
    --emoji-active-color: #007bff;
}

.emoji-reaction, .emoji-picker-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;

    /* Размер и отступы */
    height: var(--emoji-size);
    padding-left: var(--emoji-size);
    margin: 4px;

    /* Фон с эмодзи */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: var(--emoji-size) var(--emoji-size);

    /* Внешний вид */
    background-color: transparent;
    transition: background-color 0.4s ease, transform 0.2s ease;
    line-height: 1;
    user-select: none;
}

#emoji-picker {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  max-width: 500px;
  padding: 15px;
  background: #f6f6f6;
  box-shadow: 0 4px 20px rgb(0 0 0 / 29%);
  border-radius: 34px;
  z-index: 1000;
  transition: opacity 0.2s ease;
/*   transform: translateY(-200px) translateX(-23px); */
  transform: translateY(-2px) translateX(-17px);
}

#emoji-picker .emoji-picker-item {
    display: inline-flex;
    margin: 2px;
    padding: calc(var(--emoji-size) / 2 + 7px);
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.4s ease, transform 0.2s ease;
    user-select: none;
}

#emoji-picker .emoji-picker-item.active {
    background-color: var(--emoji-active-color);
}


#emoji-picker .emoji-picker-item:hover {
  transform: scale(1.45);
}

#emoji-picker .emoji-picker-item:hover:not(.active) {
    background-color: #c4cbd242;
}

#emoji-picker.hidden {
  display: none;
}

/* Блок результатов */
.reactions_block_results {
/*
    display: inline-block;
    align-items: center;
*/
    display: inline-flex;

    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-end;
    
    vertical-align: bottom;
    background-color: #e6e6e6;
    border-radius: 20px;
    font-size: 36px;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 2px;
    margin: 0px;
}

.reactions_block_results_holder {
    display: inline-block;
}

.reactions_block_results .emoji-reaction-holder {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;

    /* Внешний вид */
    border-radius: 999px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.4s ease, transform 0.2s ease;
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

.reactions_block_results .emoji-reaction-holder,
.reactions_block_results .add_new_reaction_button {
    margin: 2px;
    padding: 2px;
    height: calc(var(--emoji-size) + 10px);
    min-width: calc(var(--emoji-size) + 10px);
}    

.reactions_block_results .emoji-reaction-holder .count {
    font-weight: 600;
    min-width: 16px;
    text-align: right;
    padding: 2px 10px 2px 0px;
}

.reactions_block_results .add_new_reaction_button {
    background-image: url('/plugins/art/comments/assets/reactions/mini/0.png');
    cursor: pointer;
    user-select: none;
    border-radius: 100px;
    background-color: #fff;
    transition: background-color 0.2s ease;
}

.reactions_block_results .emoji-reaction-holder:hover,
.reactions_block_results .add_new_reaction_button:hover { 
    background-color: #e6e6e6;
}

.reactions_block_results .emoji-reaction-holder.active {
    background-color: var(--emoji-active-color);
    color: #fff;
}

.reactions_block_results .emoji-reaction-holder.active:hover {
    background-color: #0068d4;
}