/* Homepage - Thread List */

main.home-page {
    .home-controls {
        display: flex;
        gap: var(--space-sm);
        margin-left: var(--space-md);
        margin-right: var(--space-md);
        margin-top: var(--space-md);
    }

    .home-controls .btn {
        flex: 0 0 auto;
    }

    .search-box {
        form {
            display: flex;
            gap: var(--space-sm);
            margin-left: var(--space-md);
            margin-right: var(--space-md);
        }

        .input {
            flex: 1;
        }
    }

    .thread-list {
        margin-top: var(--space-md);
        display: grid;
        grid-template-columns: 1fr min-content min-content;

        @media (min-width: /* --brk-mobile */ 675px) {
            grid-template-columns: 1fr min-content min-content min-content;
        }

        .thread-item {
            border-top: 1px solid var(--color-border);
            padding: var(--space-md);
            gap: var(--space-md);
            align-items: center;
            display: grid;
            grid-column: 1 / -1; /* Must span the whole parent grid */
            grid-template-columns: subgrid;
            grid-template-rows: subgrid;
            grid-row: span 2;
            grid-template-areas:
                "title title count"
                "created replied count";

            @media (min-width: /* --brk-mobile */ 675px) {
                grid-template-areas:
                    "title created replied count";
                grid-row: initial;
            }

            .thread-title {
                margin: 0 0 var(--space-xs) 0;
                font-size: var(--font-size-base);
                font-weight: 600;
                line-height: 1.4;
                grid-area: title;
            }

            .thread-meta {
                font-size: var(--font-size-xs);
                color: var(--color-text-muted);
                white-space: nowrap;

                .author {
                    font-weight: 700;
                    /* max-width: 50px;
                    overflow: hidden;
                    text-overflow: ellipsis; */
                    /* display: inline-block; */

                    &::after {
                        content: ", ";
                        font-weight: initial;
                    }

                    @media (min-width: /* --brk-mobile */ 675px) {
                        display: block;
                        &::after {
                            content: initial;
                        }
                    }
                }

                /* .time {
                    display: inline-block;
                    overflow: hidden;
                } */

                &.created {
                    grid-area: created;
                }

                &.replied {
                    grid-area: replied;
                    text-align: right;

                    @media (min-width: /* --brk-mobile */ 675px) {
                        text-align: initial;
                    }
                }
            }

            .thread-count {
                font-weight: 700;
                font-size: var(--font-size-base);
                color: var(--color-text);
                text-align: right;
                grid-area: count;
            }
        }

        .thread-item.thread-list-header {
            display: none;

            @media (min-width: /* --brk-mobile */ 675px) {
                display: grid;
            }

            .thread-title {
                font-size: var(--font-size-xs);
                font-weight: normal;
            }

            .thread-count {
                font-size: var(--font-size-xs);
                font-weight: normal;
            }
        }
    }

    .thread-link {
        color: var(--color-text);
        text-decoration: none;

        &::before {
            content: "# ";
            color: var(--color-text-muted);
        }

        &:hover {
            color: var(--color-primary);
            text-decoration: underline;
        }
    }
}