.like-system-container {
margin: 20px 0;
display: flex;
justify-content: flex-end;
}
.like-button,
.dislike-button {
padding: 8px 16px;
border:0;
background: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
flex: 0 1 auto;
}
.like-button {
border-radius:20px 0 0 20px;
border-right: 1px solid #B1B1B1;
max-width:150px;
}
.dislike-button {
border-radius:0 20px 20px 0;
max-width:60px;
}
.like-button:hover,
.dislike-button:hover {
background: #e9e9e9;
}
.like-button.active,
.dislike-button.active {
color: #0675CD;
font-weight:bold;
}
.like-count,
.dislike-count {
margin-right: 5px;
}
.like-button.active .like-count,
.dislike-button.active .dislike-count {
}
.like-count::before,
.dislike-count::before {
font-family: 'Fontawesome';
color: #B1B1B1;
display: inline-block;
padding-right: .5rem;
}
.like-count::before {
content: '\f164';
}
.dislike-count::before {
content: '\f165';
}
.like-button.active .like-count::before,
.dislike-button.active .dislike-count::before {
color: #0675CD;
}