/**
 * Timeline — shared component styles.
 *
 * The post composer (#publish-button, .b-publish-post-cancel), the feed card
 * (.b-feed, .e-feed__*) and the feed / comment action menus rendered by the
 * Timeline plugin were duplicated almost verbatim in every per-theme file. The
 * markup is token-driven, so a single shared copy — loaded by
 * ThemesFacade::onPrepareUserThemes after header.css and before the per-theme
 * override — serves every theme. Genuine per-theme deviations stay in
 * themes/{ident}.css:
 *   • .b-feed box-shadow tint differs per palette;
 *   • themes/modern_old.css (the frozen legacy skin) keeps its own literal copy,
 *     which loads later and overrides this file for that one theme.
 *
 * The #publish-button letter-spacing reset lives in reset.css: it must outrank
 * the legacy per-theme `#publish-button` rule, so it uses the higher-specificity
 * `button#publish-button` selector there rather than being re-asserted here.
 */

#publish-button {
    background: var(--color-primary);
    box-shadow: 2px 4px 10px #B7D8EA;
    border-radius: 10px;
    height: 35px;

    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;

    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

#publish-button:hover {
    background: var(--color-primary-hover);
}

.b-publish-post-cancel {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    margin-right: 50px;

    text-align: center;
    letter-spacing: normal;
    text-transform: uppercase;

    color: var(--color-primary);
}

.b-feed {
    background: #FFFFFF;
    border-radius: 8px;
}

.e-feed__date {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    line-height: 19px;
    margin-top: 5px;
    margin-right: 20px;

    letter-spacing: 0.05em;

    color: #7A98A9;
}

.e-feed__avatar .e-user-avatar__image {
    width: 60px;
    height: 60px;
}

.e-feed__username {
    margin-top: 6px;
}

i.fa.e-feed-reactions__icon.fa-heart-o:before {
    content: "\f08a";
    color: black;
}

i.fa.fa-comment-o:before {
    content: "\f0e5";
    color: black;
}

.e-feed__action-buttons > a.dropdown-toggle,
.e-comment-item__actions-button > a.dropdown-toggle {
    color: #FFFFFF;
    background: var(--color-primary);
    box-shadow: 0 4px 10px var(--shadow-color);
    border-radius: 8px;
    width: 35px;
    height: 35px;
}

.e-feed__action-buttons > ul.dropdown-menu.text-left.e-buttons-group__dropdown > li > a,
.e-comment-item__actions-button > ul.dropdown-menu.text-left.e-buttons-group__dropdown > li > a {
    background: #FFFFFF;
    color: #333;
    border-radius: unset;
    text-transform: none;
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    box-shadow: none;
}

.e-feed__action-buttons > ul.dropdown-menu.text-left.e-buttons-group__dropdown > li > a:hover,
.e-comment-item__actions-button > ul.dropdown-menu.text-left.e-buttons-group__dropdown > li > a:hover {
    background: var(--color-primary);
    color: #FFFFFF;
}

.e-comment-item__header {
    min-height: 35px;
}

/* Hide the toggle's caret label text (the icon is drawn via the dropdown). */
.e-feed__action-buttons > .dropdown-toggle,
.e-comment-item__actions-button > .dropdown-toggle {
    font-size: 0;
}

@media (max-width: 767px) {
    #publish-button {
        font-size: 12px;
    }

    .b-publish-post-cancel {
        font-size: 12px;
        margin-right: 10px;
    }

    .e-feed__date {
        margin-right: 0;
    }
}