@import '../base.scss';

.emojiPicker .emoji {
    border-radius: 5px;
    height: $size_emoji;
    width: $size_emoji;
    padding: $padding_emoji;
    background-size: $size_emoji;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    overflow: hidden;
    transition: background-color .2s;
    display: inline-block;
    

    &:hover {
        background-color: $bg_emoji_hover;

        &.hasDiversities:before {
            opacity: 1;
        }
    }

    &.hasDiversities:before {
        content: '';
        background-color: $bg_diversity_indicator;
        display: block;
        height: 8px;
        width: 8px;
        float: right;
        opacity: 0;
        transform: translateY(-6px) translateX(6px);
        transition: opacity .2s;
    }
}