#page-community-solution {
    @apply pb-80;

    & .c-exercise-header {
        @apply mb-40;

        & .content {
            & .c-track-icon {
                height: 48px;
                width: 48px;
                @apply mr-32;
                @apply hidden lg:block;
            }

            & .avatar {
                & a {
                    @apply block;
                }

                & .c-avatar {
                    height: 48px;
                    width: 48px;
                    @apply sm:block;
                    @screen sm {
                        height: 80px;
                        width: 80px;
                    }
                }
            }

            & h1 {
                @apply text-h2 leading-140 mb-0;
                @apply flex flex-col items-start;
                & .name {
                    @apply mb-8;
                    @apply flex flex-wrap items-center;

                    & a {
                        @apply mr-10;
                        @apply border-b-2 border-borderColor6;
                        margin-bottom: -2px; /* Visually compensate for the border */
                    }
                    & .c-primary-reputation {
                        @apply ml-16;
                        @apply hidden sm:flex;
                    }
                }
                & .to {
                    @apply text-textColor6 text-20 leading-120;
                    @apply font-normal;
                    & a {
                        @apply text-textColor2 font-medium;
                        @apply border-b-2 border-borderColor6;
                    }
                }
            }
            & .decorations {
                @apply ml-auto;
            }
            & .buttons {
                @apply flex items-center;

                & .c-react-wrapper-common-share-solution-button {
                    @apply flex-grow sm:flex-grow-0;

                    & .c-share-button {
                        @apply w-100;
                        & .inner {
                            @apply w-100 flex items-center justify-center;
                        }
                    }
                }

                & .star-button,
                & .comments-button {
                    & .c-icon {
                        filter: var(--textColor6-filter);
                    }
                }
                & .star-button {
                    border: 2px solid #daa425;
                    & span {
                        min-width: 10px;
                    }

                    &.--starred {
                        background: var(--backgroundColorStarButtonStarred);
                        & .c-icon {
                            filter: none;
                        }
                    }
                }
                & .comments-button {
                    @apply ml-12;
                }
            }
        }
    }
    & article {
        & .lhs {
            @apply flex-grow;

            & .iteration-section {
                @apply bg-backgroundColorB shadow-base rounded-8;
                @apply mb-32;

                & .c-react-wrapper-track-iteration-summary {
                    height: auto;
                }
                & .c-solution-iterations {
                    height: 500px;

                    &.full-height-iteration {
                        height: 100%;
                        .c-iteration-pane {
                            height: 100%;
                        }
                    }

                    & .c-iteration-summary {
                        @apply py-8 px-24;
                        @apply border-b-1 border-borderColor7;
                    }
                }
            }
            & .mentoring {
                background: linear-gradient(180deg, #2200ff 0%, #9e00ff 100%);
                padding: 2px;
                @apply rounded-8;
                & .inner {
                    border-radius: 6px;
                    @apply flex items-center bg-backgroundColorF;
                    @apply py-16 px-24;
                    & .c-faces {
                        @apply mr-12;
                        & .face {
                            height: 32px;
                            width: 32px;
                        }
                    }
                    & .info {
                        @apply flex-grow;
                        & .mentors {
                            @apply mb-4 flex;
                            @apply text-16 leading-150 text-textColor2;
                            & strong {
                                @apply font-semibold;
                            }
                        }
                        & .more {
                            @apply flex items-center;
                            @apply font-semibold text-textColor6 leading-150;
                            & .c-icon {
                                height: 15px;
                                width: 15px;
                                @apply mr-8;
                            }
                        }
                    }
                }
            }
            & .comments {
                & .c-markdown-editor {
                    &.--expanded {
                        min-height: 220px;
                    }
                }

                & .comment {
                    & + .comment {
                        @apply mt-32;
                    }
                    & .c-avatar {
                        height: 48px;
                        width: 48px;
                        @apply mr-16;
                    }

                    & .edit-button {
                        @apply hidden ml-auto items-center;
                        @apply shadow-xsZ1 rounded-100 bg-backgroundColorA;
                        @apply py-8 px-12;

                        & .c-icon {
                            width: 50%;
                            width: 16px;
                            height: 16px;
                            @apply mr-8;
                            @apply filter-textColor6;
                        }
                        & span {
                            @apply text-textColor6 font-medium leading-150;
                        }
                    }
                    &:hover {
                        & .edit-button {
                            display: flex;
                        }
                    }
                }
            }
        }
        & .rhs {
            @screen lg {
                width: 440px;
            }

            & .about,
            & .other-solutions {
                & h2 {
                    @apply text-h4;
                    @apply flex items-center;
                    @apply mb-16;

                    & .c-track-icon {
                        height: 32px;
                        width: 32px;
                        @apply mx-8;
                    }
                }
                & .light,
                & .track-title {
                    @apply text-16 text-textColor6;
                }
                & .light {
                    @apply ml-8;
                }
            }
            & .about {
                @apply border-b-1 border-borderColor6;
                @apply pb-24 mb-24;
            }
            & .other-solutions {
                & .c-community-solution {
                    @apply mb-16;
                }
            }
        }
    }
}
