#page-community {
    .theme-light,
    .theme-accessibility-dark {
        --headerBackground: linear-gradient(
                180deg,
                rgba(251, 251, 255, 0) 79.36%,
                #f4f4fd 100%
            ),
            linear-gradient(
                180deg,
                #fafaff 0%,
                rgba(250, 250, 255, 0.677852) 24.48%,
                rgba(250, 250, 255, 0) 77.6%,
                #fafaff 100%
            ),
            var(--hex-bg-image), #fafaff;
    }

    .theme-dark {
        --headerBackground: #191525;
    }
    header {
        @apply absolute;
        width: 100%;
        height: 501px;
        left: 0px;
        top: 64px;

        background: var(--headerBackground);
    }

    .message-count {
        @apply text-textColor6 leading-150 font-semibold;
        @apply flex items-center;
        img {
            @apply filter-textColor6 mr-12;
        }
    }

    .explore-link {
        @apply flex place-content-center;
        @apply text-lightBlue text-center font-semibold text-16;

        &:after {
            content: url("icons/arrow-right.svg");
            height: 16px;
            width: 16px;
            @apply ml-12;
            @apply filter-lightBlue;
        }
    }

    .contributors-list {
        @apply mb-80;

        & > .container {
            .highlights {
                @apply grid gap-16;
                @apply mb-32;

                .highlight {
                    @apply border-1 border-borderColor6;
                    @apply shadow-xsZ1 rounded-8 bg-backgroundColorA;
                    @apply py-12 px-24;
                    @apply flex items-center;

                    .emoji {
                        @apply text-24 leading-140;
                        @apply mr-24;
                    }
                    .c-avatar {
                        height: 48px;
                        width: 48px;
                        @apply mr-20;
                    }
                    .new {
                        @apply bg-lightGold rounded-3;
                        @apply px-8 py-4;
                        @apply text-12 leading-120 uppercase font-bold font-mono;
                        @apply mr-24;
                    }
                    .info {
                        .title {
                            @apply text-16 leading-150 font-medium text-textColor6;
                        }
                        .handle {
                            @apply text-h5;
                        }
                    }
                }
            }

            .c-search-bar {
                @apply flex items-center mb-16;
                .tabs {
                    @apply flex items-center;
                    .c-tab-2 {
                        @apply text-textColor6 text-16 leading-140 font-medium;
                        @apply py-10 border-b-3;
                        &.selected {
                            @apply text-textColor2 font-semibold;
                        }
                    }
                }
            }

            .c-single-select {
                @apply ml-12;
            }
        }
        .contributors {
            @apply shadow-lg rounded-8 bg-backgroundColorA;
            .contributor {
                @apply px-16 py-12;
                @apply border-b-1 border-borderColor7;
                @apply flex flex-col;

                @apply md:px-24 md:py-8;
                @apply md:flex-row md:items-center;

                .rank {
                    @apply flex-shrink-0;
                    @apply text-textColor6 font-medium leading-150 text-center;
                    @apply mr-24;
                    width: 40px;
                    @screen lg {
                        width: 60px;
                    }
                }
                .c-avatar {
                    height: 48px;
                    width: 48px;
                    @apply mr-16;
                }
                .info {
                    max-width: 570px;
                    @apply mr-24;
                    h3 {
                        @apply text-16 leading-150 font-semibold text-textColor2;
                    }
                    p {
                        @apply leading-150 text-textColor6;
                    }
                }
                .c-primary-reputation {
                    transform: scale(0.8);
                    transform-origin: 0 50%;

                    @apply md:ml-auto;
                    @screen md {
                        transform: unset;
                    }
                }
                .c-icon.action-icon {
                    height: 16px;
                    width: 16px;
                    @apply ml-96;
                    @apply filter-textColor6;
                }
            }
            .c-pagination {
                @apply mt-32;
                padding: 8px 24px;
            }
        }
    }

    .new {
        @apply bg-lightGold rounded-3;
        @apply text-12 leading-140 font-mono font-bold uppercase;
        @apply py-4 px-8;
    }
}
