.va-ce {
    --va-ce-accent: var(--motif-color-accent-primary, var(--accent, #7b3f26));
    --va-ce-share-accent: var(--motif-color-accent-secondary, var(--secondary, #b87914));
    --va-ce-text: var(--plugin-text, var(--ink, #2f251f));
    --va-ce-muted: var(
        --plugin-text-muted,
        color-mix(in srgb, var(--va-ce-text) 72%, transparent)
    );
    border-block: 0;
    margin-block: 1.25rem;
    padding-block: 0.75rem;
}

.va-ce__prompt,
.va-ce__note,
.va-ce__status {
    margin: 0;
}

.va-ce__prompt {
    color: var(--va-ce-text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.va-ce__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block: 0.55rem 0.4rem;
}

.va-ce__button {
    align-items: center;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--va-ce-accent) 35%, transparent);
    border-radius: 999px;
    color: var(--va-ce-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.78rem;
    gap: 0.3rem;
    justify-content: center;
    line-height: 1.2;
    min-height: 2rem;
    padding: 0.28rem 0.55rem;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        opacity 0.16s ease;
}

.va-ce__reaction,
.va-ce__share {
    font-family: var(--plugin-font, system-ui, sans-serif);
}

.va-ce__reaction {
    font-size: 0.7rem;
    min-height: 1.75rem;
    opacity: 0.76;
    padding: 0.2rem 0.45rem;
}

.va-ce__reaction:hover,
.va-ce__reaction:focus-visible,
.va-ce__reaction[aria-pressed="true"] {
    opacity: 1;
}

.va-ce__button:hover,
.va-ce__button:focus-visible {
    background: color-mix(in srgb, var(--va-ce-accent) 8%, transparent);
    border-color: var(--va-ce-accent);
}

.va-ce__button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--va-ce-accent) 14%, transparent);
    border-color: var(--va-ce-accent);
}

.va-ce__button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--va-ce-accent) 35%, transparent);
    outline-offset: 2px;
}

.va-ce__button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.va-ce__count {
    color: var(--va-ce-accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.va-ce__count:empty {
    display: none;
}

.va-ce__count:not(:empty) {
    min-width: 1ch;
}

.va-ce__icon {
    flex: 0 0 auto;
    height: 0.9em;
    width: 0.9em;
}

.va-ce__reaction .va-ce__icon {
    height: 1.2em;
    width: 1.2em;
}

.va-ce__share {
    border-color: color-mix(in srgb, var(--va-ce-share-accent) 70%, transparent);
    margin-inline-start: 0.65rem;
    position: relative;
}

.va-ce__share::before {
    background: color-mix(in srgb, var(--va-ce-share-accent) 58%, transparent);
    content: "";
    height: 1.2rem;
    inset-block-start: 50%;
    inset-inline-start: -0.55rem;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
    width: 1px;
}

.va-ce__share:hover,
.va-ce__share:focus-visible {
    background: color-mix(in srgb, var(--va-ce-share-accent) 8%, transparent);
    border-color: var(--va-ce-share-accent);
}

.va-ce__share .va-ce__icon,
.va-ce__share .va-ce__count {
    color: var(--va-ce-share-accent);
}

.va-ce__icon--share-nodes {
    background-color: currentColor;
    display: inline-block;
    mask-image: url("/plugins/content-engagement/icons/fontawesome/share-nodes.svg?v=bMD5bOntDQ23");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.va-ce__note,
.va-ce__status {
    color: var(--va-ce-muted);
    font-size: 0.72rem;
}

.va-ce__status {
    min-height: 1.2em;
}

.va-ce__status:empty {
    display: none;
}

.va-ce__honeypot {
    height: 1px !important;
    left: -10000px !important;
    overflow: hidden !important;
    position: absolute !important;
    top: auto !important;
    width: 1px !important;
}

.va-ce--collection-item {
    margin-block: 0.55rem 0;
    padding-block: 0.35rem 0;
}

.va-ce--collection-item .va-ce__prompt {
    font-size: 0.75rem;
}

.va-ce--collection-item .va-ce__actions {
    margin-block: 0;
}

@media (max-width: 48rem) {
    .va-ce__actions {
        align-items: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .va-ce__reaction {
        grid-column: 1;
        justify-content: flex-start;
    }

    .va-ce__share {
        grid-column: 2;
        grid-row: 1;
    }
}