// Shared look for the addon shortcodes' lists, counts and notices, so
// bookmark/upvote/reaction/claim output reads as one family. The
// per-addon BEM classes stay on the markup for JS and back-compat.

.ecm-sc-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    &__item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 12px 16px;
        background: var(--ecm-background);
        border: 1px solid var(--ecm-border-color);
        border-radius: 8px;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;

        &:hover,
        &:focus-within {
            border-color: var(--ecm-primary);
            box-shadow: var(--ecm-shadow);

            .ecm-sc-list__title {
                color: var(--ecm-primary);
            }
        }
    }

    &__image {
        flex: none;
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 6px;
    }

    &__info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
    }

    &__title {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        color: var(--ecm-font-color);
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.4;
        text-decoration: none;
        transition: color 0.15s ease;

        &:hover {
            text-decoration: none;
        }

        svg {
            flex: none;
            width: 14px;
            height: 14px;

            path {
                fill: var(--ecm-text-muted);
            }
        }
    }

    &__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        margin: 0;
        color: var(--ecm-text-muted);
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.4;

        // "Reacted: Like · October 24, 2026"
        > * + *::before {
            content: "·";
            margin-right: 8px;
        }
    }
}

// Empty and login states ("No claims found.", "Please login to …").
.ecm-shortcode-notice {
    // Only zero the bottom: the theme's block gap supplies the top margin.
    margin-bottom: 0;
    padding: 12px 16px;
    color: var(--ecm-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    background: var(--ecm-secondary);
    border: 1px dashed var(--ecm-border-color);
    border-radius: 8px;
}

// [ecm_*_count] and [ecm_view_counter] pills.
.ecm-sc-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    color: var(--ecm-font-color);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--ecm-secondary);
    border: 1px solid var(--ecm-border-color);
    border-radius: 999px;

    svg {
        flex: none;
        width: 14px;
        height: 14px;
    }
}

// A count used on its own in a block theme is a direct child of the
// constrained layout, which centers every child with `margin: auto
// !important`. Keep the pill compact but pin it to the content column's
// left edge instead of centering it.
.is-layout-constrained > .ecm-sc-count {
    display: flex;
    width: fit-content;
    margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 100%)) / 2)) !important;
    margin-right: auto !important;
}