.reactions-main-container {
    min-height: 2.5rem !important;
    position: relative;
    display: inline-block;
}

.reaction-main-button {
    padding: 0.25rem 0rem !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.reactions-main-icon,
.reactions-secondary-icon {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    margin-top: 0.25rem;
    position: inherit;
    z-index: 10;
}

.reactions-secondary-icon{
    margin-left: -1.1rem;
}

.reactions-main-icon-container {
    padding-left: 0.25rem;
    min-width: 2rem;
    width: max-content;
    height: 2rem !important;
    position: relative;
}

.reactions-show-main-icon{
    animation-name: reactions-show-main-icon-animation;
    animation-duration: 0.3s;
}

.reactions-total-count {
    font-size: 0.875rem;
    width: 1.5rem;
    height: 2rem;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bf-theme-body-text);
}

.reactions-icon-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bf-theme-background);
    gap: 0.75rem;
    padding: 0.25rem;
    border: 0.063rem solid rgba(150, 150, 150, 0.2);
    border-radius: 2.688rem;
    z-index: 150;
}

.reactions-icon-container .icon {
    padding: 0.25rem;
    cursor: pointer;
}

.reactions-icon-buttons {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    color: var(--bf-theme-body-text);
    cursor: pointer;
    width: 2rem;
    height: 2rem;
}

.reactions-clickable-image {
    width: 1.5rem;
    height: 1.5rem;
}

.reaction-container-show .reactions-icon-animation {
    animation-name: reactions-icons-animation;
}

.reaction-container-hide .reactions-icon-animation {
    animation-name: reactions-hide-icons-animations;
    transform: translateY(1.563rem) scale(0.1)
}

.reactions-hidden {
    display: none !important;
}

/* disable iOS default download images */
.disable-user-select {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

@-webkit-keyframes reactions-icons-animation {
    0% {
        transform: translateY(1.563rem) scale(.3374)
    }

    100% {
        transform: translateY(0) scale(1)
    }
}

@-webkit-keyframes reactions-hide-icons-animations {
    0% {
        transform: translateY(0) scale(1)
    }

    100% {
        transform: translateY(1.563rem) scale(.3374)
    }
}

@-webkit-keyframes reactions-show-main-icon-animation {
    0% {
        transform: scale(0.1)
    }

    100% {
        transform: scale(1)
    }
}