/**
 * Shared CSS custom properties for the Viafoura SDK.
 *
 * Enqueued alongside the SDK script wherever a Viafoura widget actually
 * renders -- see Viafoura_Commenting_Module::enqueue_assets().
 */

.viafoura {
	--accent-color-light: var(--wp--custom--utility--color--brand-secondary);
	--accent-color: var(--wp--custom--utility--color--brand-primary);
	--accent-color-dark: var(--wp--custom--utility--color--accent-dark);
	--text-on-accent-color: var(--wp--custom--utility--color--brand-primary-complement);
}

.membership-comments-module .viafoura,
.membership-recirculation-module .viafoura {
	/* Sets the background color */
	--background-color: #f5f5f5;
}

.membership-comments-module .viafoura .vf3-comments,
.membership-recirculation-module .viafoura .vf-trending-articles {
	/* Sets the background color */
	--default-color: #f5f5f5;
}

.membership-comments-module .viafoura {
	--base-font-size: 0.75rem;
}

.membership-comments-module .viafoura .vf-comment__bottom-actions .vf-label {
	--base-font-size: 1rem;
	font-size: var(--base-font-size);
}

.membership-comments-module .viafoura .vf-comment__bottom-actions .vf-thumbsup-icon {
	bottom: 0px !important;
	height: var(--base-font-size);
	line-height: var(--base-font-size);
	top: 1px;
	width: var(--base-font-size);
}

.membership-comments-module .viafoura .vf-button.is-cta[disabled] {
	color: #888888 !important;
}

.membership-comments-module .viafoura .vf3-comments .vf-button.is-cta,
.membership-comments-module .viafoura .vf3-comments .vf-load-more__button,
.membership-comments-module .viafoura .vf3-comments .vf-load-more__button:active,
.membership-comments-module .viafoura .vf3-comments .vf-load-more__button:focus,
.membership-comments-module .viafoura .vf3-comments .vf-load-more__button:hover {
	--background-color: var(--wp--custom--utility--color--brand-primary);
	--light-text-on-background-color: #ffffff;
	--accent-color: #ffffff;
	background-color: var(--background-color) !important;
	border-radius: 6px;
	font-weight: bold;
}

.membership-comments-module .viafoura .vf-comment-header {
	/* Hide the header within the Viafoura conversations module. This is replaced by our own custom version. */
	display: none !important;
}

.viafoura .vf-tray-trigger--floating,
.vf-is-logged-out .vf-tray-trigger,
.viafoura .vf3-conversations-footer,
.viafoura .vf-comments-trending-articles {
	/* Hide Misc Viafoura elements that we don't want included in the design. */
	display: none !important;
}