@import 'variables';
@import 'mixins';

#solution-page,
#mentor-solution-page,
#my-solution-page,
#teams-solution-page,
#teams-my-solution-page {
    .legacy-warning {
        background: #eee;
        padding: 15px 20px;
        color: #666;
        border: solid #ddd;
        border-width: 1px 1px 0 1px;
        border-radius: 2px 2px 0 0;
        h4 {
            font-weight:$fw-bold;
            display:inline-block;
        }
    }
    .pane.instructions {
        padding:20px 30px;
        h1,h2,h3,h4,h5,h6 {
            font-weight:$regular;
            @include font-size(16, 16);
            margin-bottom:7px;
        }
        h1 {
            @include font-size(18, 18);
            font-weight:$bold;
            margin-bottom:15px;
        }
        h2 {
            @include font-size(14, 14);
            padding-bottom:3px;
            border-bottom:1px solid #eee;
            margin-bottom:10px;
        }
        p {
            @include font-size(14, 20);
            margin-bottom:7px;
        }
        p+h2 {
            margin-top:20px;
        }
        a {
            color:#333;
        }

    }
    .solution.single-file {
        .solution-code {
            min-height:200px;
            margin:0;
            padding:10px 15px 10px 45px;
            @include width-small() {
                padding: 10px 15px 10px 55px;
            }
        }
    }

    .test-suite,
    .solution.multi-file {
        h3 {
            padding:10px 50px 10px 27px;
            font-weight:$bold;
            @include font-size(13, 13);
            background:#eee;
            color:#666;
            border-bottom:1px solid #ddd;
            margin-bottom:5px;
        }
        pre+h3 {
            margin-top:10px;
        }
        pre {
            padding-top:10px;
            margin-right: 10px;
        }
    }
    .solution pre {
        background:#fff;
    }

    .solution, .test-suite {
        pre {
            padding-top:0;
            padding-bottom:0;
            border-radius: 0;
        }
    }
    .lhs-content {
        .panes {
            border:1px solid #ddd;
            border-radius:2px;
        }
        .legacy-warning+.panes {
            border-radius:0 0 2px 2px;
        }
    }
    .new-editable-text {
        .warning {
            display:none;
            background: #eee;
            border:solid #ddd;
            border-width:0 1px 1px 1px;
            color:#666;
            padding: 15px;
            h4 {
                display:inline-block;
                font-weight:$fw-semibold;
            }
        }
        .md-editor.active+.warning {
            background: #EBF7F8;
            color: #666;
            h4 {
                color:$color-2;
            }
        }
        &.show-warning {
            .warning {
                display:block;
            }
            form .preview-area {
                min-height:317px;
            }
        }
    }
}

body:not(.prism-dark) #solution-page,
body:not(.prism-dark) #mentor-solution-page,
body:not(.prism-dark) #my-solution-page,
body:not(.prism-dark) #teams-solution-page,
body:not(.prism-dark) #teams-my-solution-page {
    .pane.instructions {
        pre {
            margin-bottom:10px;
            background:#f6f6f6;
        }
        code {
            @include font-size(12, 12);
            color:#666;
        }
    }
}

#solution-page {
    .header {
        margin-top:20px;
        border:1px solid #e5e5e5;
        border-radius:2px;
        padding:20px;
        margin-bottom:30px;
        .clearfix {clear:both}

        .avatar {
            display:none;
            width:75px;
            height:75px;
            background-color:#fff;
            margin-top: -10px;
            margin-bottom: -10px;
            border:3px solid $color-2;
            border-radius: 100%;
            overflow:hidden;
            @include width-medium() {
                display:block;
                float:left;
                margin-right:15px;
                margin-left: -55px;
            }
            .img {
                width:60px;
                height:60px;
                background-repeat:no-repeat;
                background-size:contain;
                background-position:center center;
            }
        }
        .info {
            @include width-medium() {
                float:left;
                width:50%;
            }
            h1 {
                @include font-size(25, 25);
                font-weight:$bold;
                margin-bottom:7px;
            }
            h2 {
                @include font-size(15, 15);
                color:#999;
                letter-spacing:-0.1px;
                line-height: 20px;
                a {
                    color:#333;
                    text-decoration:none;
                    font-weight:$regular;
                    border-bottom:1px solid #ddd;
                }
                .track {
                    color:#333;
                    text-decoration:none;
                    img {
                        width:20px;
                        display:inline-block;
                    }
                    .title {
                        @include font-size(14, 18);
                        font-weight:$fw-regular;
                        display:inline-block;
                        color:green;
                    }
                }
            }
        }
        .details {
            margin-top:10px;
            .starred-count {
                color:$color-1;
                font-weight:$fw-semibold;
                @include font-size(13, 13);
                i { display: none }
            }
            .star-button {
                border:1px solid $color-1;
                background:#fff;
                color:$color-1;
                padding:6px 10px;
                width:160px;
                text-align:center;

                i {
                    margin-right:5px;
                }
            }
            .published-at {
                display:none;
                color:#666;
                @include font-size(13, 13);
            }

            @include width-medium() {
                float:right;
                text-align:right;
                margin-top:0;
                .starred-count {
                    margin-top:0px;
                    margin-bottom:20px;
                    i { display: inline-block }
                }
                .star-button {
                    margin-bottom:13px;
                }
                .published-at {
                    display:block;
                }
            }

        }
    }
   .info-bar {
        overflow:hidden;
        margin-top:-10px;
        margin-bottom:30px;
        background:rgba($color-1, 0.1);
        padding:10px;
        color:$color-1;

        a {
            border-radius:2px;
            font-weight:$fw-semibold;
            color:$color-1;
        }
    }

    .no-reflection,
    .reflection {
        margin: 15px 0 30px 0;
        padding:40px 40px;
        @include width-medium() {
           margin:48px 0 0 50px;
        }
        h3 {
            @include font-size(16, 16);
            font-weight:$regular;
            margin-bottom:10px;
        }
    }
    .reflection,
    .no-reflection {
        border:1px solid #eaeaea;
        background:#fafafa;
    }
    .reflection {
        border-radius:2px;
        p {
            @include font-size(14, 19);
        }
    }
    .no-reflection {
        p, li {
            @include font-size(14, 19);
            color:#666;
        }
        p {
            margin-bottom:10px;
        }
        ul {
            margin-bottom:0;
        }
    }
    .comments-disabled {
        margin-top:10px;
        padding: 15px;
        border: 1px solid #ddd;
        text-align: center;
        background: #fafafa;
        .text {
            color: #666;
        }

        .pure-button {
            margin-top:10px;
            background:$color-2;
            color:#fff;
        }
    }

    .comments-section {
        clear:both;
        border-top:1px solid #eee;
        padding-top:20px;
        margin-top:20px;
        clear:both;
        h2 {
            @include font-size(18, 18);
            letter-spacing:-0.4px;
            font-weight: $regular;
            margin-bottom:8px;
        }
        .h2-subtitle {
            @include font-size(14, 14);
            color:#666;
            margin-bottom:20px;
        }
        .no-comments {
        }
        .comments+form {
            margin-top:40px;
        }
        .disable-comments {
            float:right;
            color:#666;
            @include font-size(13, 18);
        }
    }
}

body:not(.prism-dark) {
    #solution-page,
    #mentor-solution-page,
    #my-solution-page,
    #teams-solution-page,
    #teams-my-solution-page,
    #my-track-not-joined-page {
        .test-suite,
        .solution.multi-file,
        .test-suite pre,
        .solution pre,
        .code-sample pre,
        .code-sample code {
            background:#f9f9f9;
        }
    }
}
body.prism-dark {
    #solution-page,
    #mentor-solution-page,
    #my-solution-page,
    #teams-solution-page,
    #teams-my-solution-page,
    #my-track-not-joined-page {
        .test-suite,
        .solution.multi-file,
        .test-suite pre,
        .solution pre,
        .code-sample pre,
        .code-sample code {
            background:#272822;
        }
    }
}
