.forum {
    --background-colour: var(--colour-orange);

    --icon-star: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9ImN1cnJlbnRDb2xvciIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNiAyLTQuNTUgOS4yMi0xMC4xNyAxLjQ3IDcuMzYgNy4xOEw2LjkgMzBsOS4xLTQuNzhMMjUuMSAzMGwtMS43NC0xMC4xMyA3LjM2LTcuMTctMTAuMTctMS40OHoiLz48L3N2Zz4=');

    .posts {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        grid-auto-rows: auto auto auto;
        gap: 1rem;
        margin-block: 1rem;
    }

    & article {
        display: grid;
        padding: 0.5rem;
        border-radius: 0.5rem;
        background-color: rgba(from var(--background-colour) r g b / 0.1);
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        gap: 0.5rem;
        grid-row-end: span 3;

        &.unread {
            & h4 {

                &::after {
                    position: absolute;
                    top: calc(50% - 0.5rem);

                    right: 0.5rem;
                    display: block;
                    width: 1rem;
                    height: 1rem;
                    content: '';
                    border-radius: 50%;
                    background-color: var(--colour-yellow);
                    mask-image: var(--icon-star);
                    mask-size: contain;
                    mask-position: center;
                    mask-repeat: no-repeat;
                }
            }
        }
    }

    & h4 {
        font-size: var(--font-size-15625);
        font-weight: bold;
        position: relative;
        margin: 0;
        border-radius: 0.5rem;
        background-color: var(--background-colour);
        padding-inline: 0.5rem;

        & a:any-link {
            display: block;
            text-decoration: none;
        }
    }

    .meta {
        font-size: var(--font-size-1);
        margin: 0 0 0.2rem;
    }

}

.button:any-link {
    text-transform: capitalize;
    padding-inline: 1rem;
}

.goc-react-button {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    color: #666;
    border-radius: 50%;

    &:hover {
        color: #333;
        background-color: #f0f0f0;
    }
}

[popover] {
    top: anchor(top);
    left: anchor(center);
    overflow-x: hidden;
    max-width: 100vw;
    margin: 0;
    padding: 0.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease, overlay 0.3s ease allow-discrete, display 0.3s ease allow-discrete;
    transform: translate(-50%, calc(-100% - 1rem));
    border: none;
    opacity: 0;

    /* Anchoring */
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);

    gap: 0.5rem;

    &:popover-open {
        opacity: 1;
        display: flex;
        transform: translate(-50%, calc(-100% - 0.5rem));
    }
}


.goc-emoji-btn {
    all: unset;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
        transform: scale(1.2);
    }

    &[data-reacted="true"] {
        background-color: hsl(from var(--colour-blue) h s 90);
    }

}

.goc-reactions-display {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.goc-reaction-count {
    font-family: inherit;
    font-size: var(--font-small);
    padding: 0.1rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: inherit;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    background: #f0f0f0;

    &:hover {
        background: #e0e0e0;
    }

    &.user-reacted {
        border-color: #90caf9;
        background: #e3f2fd;
    }
}

.bbp-reply-content {
    padding-bottom: 2.5rem;
}

.goc-reaction-users-popover {
    font-size: var(--font-small);
    color: #333;
    padding: 0.5rem 1rem;
    width: max-content;
    display: block;
}

.goc-reaction-users-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    & li {
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }
}