/**
 * BUZEECI — Post Interaction Buttons (Articles & Blog)
 *
 * Like, comment, repost, views, and bookmark button bar for single posts
 * and blog index. Extracted from main.css sections 40.
 *
 * @package    BUZEECI
 * @subpackage assets/css
 * @since      1.0.0
 */

/* ------------------- Divider ---------------------- */

hr {
	height: 1px!important;
}

/* --- Post Interaction Buttons (Articles & Blog) --- */

.bzc-superclass-post-buttons,
.bzc-superclass-post-buttons .generic-button {
    display: flex;
    flex: auto;
}

.bzc-superclass-post-buttons {
    border-bottom: 1px solid var(--bb-content-border-color) !important;
    margin-bottom: 30px;
}

.bzc-superclass-post-buttons .generic-button div.post-views {
    margin-bottom: 0;
}

.bzc-superclass-post-buttons .bzc-like-button {
    margin-left: -5px;
}

.bzc-superclass-post-buttons .bb-icon-heart {
    color: #36424b !important;
    font-size: 19px !important;
}

.bzc-superclass-post-buttons .bzc-like-button img {
    height: 16px;
    width: 16px;
    object-fit: cover;
}

.bzc-superclass-post-buttons .generic-button>span {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 9;
    color: var(--bzc-alternate-text-color);
    margin-left: -2px;
    font-size: 13px;
    min-width: 30px;
}

.bzc-superclass-post-buttons .generic-button>a {
    width: auto !important;
    min-width: 35px !important;
    min-height: 35px !important;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    column-gap: 2px;
    border-radius: 100px;
}

.bzc-superclass-post-buttons .generic-button>a:not(.bzc-like-button):before {
    display: inline-block;
    min-width: initial !important;
    content: '' !important;
    width: 17px;
    height: 18px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--bzc-alternate-text-color);
}

.bzc-superclass-post-buttons .generic-button .bzc-comments-button:before {
    -webkit-mask-image: url(../img/comment.svg);
    mask-image: url(../img/comment.svg);
}

.bzc-superclass-post-buttons .generic-button .bzc-views-button:before {
    -webkit-mask-image: url(../img/articles/views.svg);
    mask-image: url(../img/articles/views.svg);
}

.bzc-superclass-post-buttons .generic-button .bzc-repost-button:before {
    -webkit-mask-image: url(../img/repost.svg);
    mask-image: url(../img/repost.svg);
}

/* --- Post Button Bookmark (Articles & Blog Index) --- */

.bzc-superclass-post-buttons .generic-button.bookmark,
.blog .entry-meta .generic-button.bookmark {
    flex: 0 0 0 !important;
    position: relative;
    right: -10px;
    cursor: pointer;
}

.bzc-superclass-post-buttons .generic-button.bookmark>div,
.blog .entry-meta .generic-button.bookmark>div {
    min-width: 35px;
    min-height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 100px;
}

.bzc-superclass-post-buttons .generic-button.bookmark>div>span,
.blog .entry-meta .generic-button.bookmark>div>span {
    display: flex;
    align-items: center;
}

.bzc-superclass-post-buttons .generic-button.bookmark .add-bookmark .bookmark-icon:before,
.blog .entry-meta .generic-button.bookmark .add-bookmark .bookmark-icon:before {
    content: '';
    mask-image: url(../img/bookmark.svg);
    width: 17px;
    height: 18px;
    display: inline-block;
    mask-size: 17px;
    background-color: var(--bzc-alternate-text-color);
}

.bzc-superclass-post-buttons .generic-button.bookmark .remove-bookmark .bookmark-icon:before,
.blog .entry-meta .generic-button.bookmark .remove-bookmark .bookmark-icon:before {
    content: '';
    background-image: url(../img/bookmarked.svg);
    width: 17px;
    height: 18px;
    display: inline-block;
    background-size: 17px;
}

/* --- Post Button Hover Effects --- */

.bzc-superclass-post-buttons .activity-bookmark-button:hover,
.blog .entry-meta .activity-bookmark-button:hover {
    background-color: rgba(29, 155, 240, 0.1) !important;
}

.bzc-superclass-post-buttons .activity-bookmark-button.add-bookmark:hover>span:before,
.blog .entry-meta .activity-bookmark-button.add-bookmark:hover>span:before {
    background-color: rgb(29, 155, 240) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-like-button:hover {
    background-color: rgba(249, 24, 128, 0.1) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-like-button:hover i:before {
    color: rgb(249, 24, 128) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-like-button:hover+span {
    color: rgb(249, 24, 128) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-comments-button:hover,
.bzc-superclass-post-buttons .generic-button .bzc-views-button:hover {
    background-color: rgba(29, 155, 240, 0.1) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-comments-button:hover:before,
.bzc-superclass-post-buttons .generic-button .bzc-views-button:hover:before {
    background-color: rgb(29, 155, 240) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-comments-button:hover+span,
.bzc-superclass-post-buttons .generic-button .bzc-views-button:hover+span {
    color: rgb(29, 155, 240) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-repost-button:hover {
    background-color: rgba(0, 186, 124, 0.1) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-repost-button:hover:before {
    background-color: rgb(0, 186, 124) !important;
}

.bzc-superclass-post-buttons .generic-button .bzc-repost-button:hover+span {
    color: rgb(0, 186, 124) !important;
}