@use 'mixins';

.page-comms {
    --padding-hor: 20px;
    @include mixins.mobile() {
        padding: 0;
        margin: 0;
        // padding-top: var(--navbar-height);
    }
    .sidebar-right {
        > * {
            margin-bottom: var(--gap);
        }
    }
    main {
        margin-left: var(--post-card-margin-left);
        @include mixins.mobile() {
            margin-left: 0;
        }
    }
    .page-comms-header {
        display: grid;
        grid-template-columns: 1fr max-content;
        align-items: center;
        margin-bottom: var(--gap);
        height: 80px;
        @include mixins.mobile() {
            padding: var(--gap);
            background-color: transparent;
            box-shadow: none;
            border: none;
        }
        h1 {
            font-size: var(--fs-2xl);
            @include mixins.mobile() {
                font-size: var(--fs-xl);
            }
        }
        .left {
            input {
                width: 100%;
                height: unset;
            }
        }
        .right {
            display: flex;
            margin-left: calc(var(--gap) / 2);
            > * {
                margin-right: var(--gap);
                &:last-child {
                    margin-right: 0;
                }
            }
            .comms-search-button {
                &.is-search-svg {
                    svg {
                        transform: scale(1.3);
                    }
                }
            }
        }
        input {
            font-size: 1.8rem;
        }
    }
    .home-welcome {
        .home-welcome-join {
            font-size: var(--fs-xl);
            font-weight: 600;
        }
    }
    .comms-list {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--gap);
        @include mixins.mobile() {
            margin-bottom: 0;
        }
        .comms-list-sort {
            border-top: var(--seperator);
            border-bottom: var(--seperator);
            background-color: rgba(var(--base-fg), 0.02);
            padding: 8px var(--padding-hor);
        }
        .comms-list-item {
            cursor: pointer;
            padding: 18px 20px;
            display: grid;
            grid-template-columns: max-content 1fr;
            border-bottom: var(--seperator);
            color: inherit;
            text-decoration: unset;
            @include mixins.mobile() {
                margin: 0;
                padding: 18px 20px;
            }
            &:hover {
                background-color: var(--color-bg);
                .comms-list-item-name {
                    color: var(--color-brand);
                }
            }
            &:last-child {
                border-bottom: none;
            }
            .comms-list-item-left {
            }
            .comms-list-item-right {
                display: flex;
                flex-direction: column;
                padding-left: var(--gap);
            }
            .comms-list-item-name {
                font-size: var(--fs-xl);
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .comms-list-item-name-name {
                    margin-right: var(--gap);
                }
                .comms-list-item-join {
                    transform: scale(0.8);
                }
            }
            .comms-list-item-count {
                color: var(--color-gray);
            }
            .comms-list-item-about {
            }
        }
        .profile-picture {
            --image-size: 55px;
        }
    }
    .feed {
        .feed-no-more {
            margin-left: 0;
        }
    }
}
