.postReactions{
display: flex;
justify-content: space-around;
}
.postReactions-reaction{
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
line-height: 1.2em;
}
.postReactions-reaction:hover{
transition: 0.4s;
}
.postReactions-reaction-disable{
filter: grayscale(100%);
cursor: default;
}
.postReactions-reaction-enable{
cursor: default;
background-position: center top;
}
.postReactions-reaction-text, .postReactions-reaction-count{
text-align: center;
font-weight: 700;
color: #555;
}
.postReactions-reaction-text{
display: none;
}
.postReactions-reaction:hover > .postReactions-reaction-text{
display: block;
}
.postReactions-reaction:hover > .postReactions-reaction-count{
display: none;
}
@media(min-width: 992px){
.postReactions-reaction{
padding-top: 80px;
background-size: auto 60px;
font-size: 0.875rem;
}
.postReactions-reaction:hover{
background-size: auto 80px;
background-position: center top;
}
.postReactions-reaction-enable{
background-size: auto 80px!important;
}
.postReactions-reaction-disable:hover{
background-size: auto 60px!important;
background-position: center center!important;
}
.postReactions-reaction-text, .postReactions-reaction-count{
margin-top: 10px;
}
}
@media(max-width: 992px){
.postReactions-reaction{
padding-top: 50px;
background-size: auto 50px;
font-size: 0.75rem;
}
.postReactions-reaction:hover{
background-size: auto 60px;
background-position: center top;
}
.postReactions-reaction-enable{
background-size: auto 60px!important;
}
.postReactions-reaction-disable:hover{
background-size: auto 50px!important;
background-position: center center!important;
}
.postReactions-reaction-text, .postReactions-reaction-count{
margin-top: 20px;
}
}