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

#mentor-solution-page {
    .track-header {
        overflow:hidden;
        background:$color-1;
        padding:20px 0;
        img {
            float:left;
            margin-right:15px;
            height:50px;
            display:block;
            border:1px solid #fff;
            border-radius:2px;
        }
        .inner {
            color:#fff;
            > .widget-iterations-nav {
                float:right;
                display:none;
                @include width-small() {
                    display:block;
                }
            }
            .small-iterations-nav {
                @include width-small() {
                    display:none;
                }
                margin-top: 20px;
                .widget-iterations-nav {
                    .title, .iterations {
                        text-align:left;
                    }
                }
            }
            h2 {
                @include font-size(22, 22);
                font-weight:$regular;
                margin-bottom:3px;
                padding-top:5px;
                strong {
                    font-weight:$bold;
                }
            }
            .byline {
                @include font-size(14, 14);
                a {
                    color:#fff;
                }
            }
        }
    }

    .tools-bar {
        overflow:hidden;
        margin-bottom:20px;
        background:rgba($color-1, 0.70);
        border:1px solid rgba($color-1, 0.8);
        padding:8px 0;
        @include width-medium() {
            margin-bottom:40px;
        }
        .mentoring-notes {
            @include width-medium() {
                float:right;
            }
            padding:6px 10px;
            background:#fff;
            color:$color-1;
            font-weight:$regular;
            &:hover {
                background: rgba(#fff, 0.9);
            }
        }
        .notification {
            color:#fff;
            font-weight:$regular;
            vertical-align:middle;
            .ignore {
                font-weight:$regular;
                color:#fff;
                text-decoration:underline;
                background: #fff;
                padding: 6px 10px;
                color: $color-1;
                text-decoration: none;
                vertical-align: baseline;
                margin-left: 5px;
            }
        }
    }
    .analysis-section {
        border:1px solid $color-1;
        margin-bottom:20px;
        h3 {
            background:$color-1;
            color:#fff;
            padding:15px;
            i {
                color:#fff;
                margin-left:5px;
            }
        }
        .recommendation {
            padding:10px 15px;
            border-bottom:1px solid #aaa;
            font-weight:$fw-semibold;
        }

        .comments {
            h4 {
                font-weight:$fw-bold;
                padding:15px;
            }
            .comment.widget-code-snippet {
                position: relative;
                border-width:0 0 1px 0;
                border-color: #ccc;
                overflow: hidden;
                background:#fcfcfc;
                padding: 10px 15px;
                textarea {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 5px;
                    height:5px;
                    z-index:5
                }
                .copy-button {
                    z-index:10;
                }
                .editable-text-html {
                    padding-right:65px;
                    margin-bottom:0;
                   * {
                        @include font-size(14, 19);
                    }
                    code { &, * { font-size:12px; } }

                }
                &:last-child {
                    border-width:0;
                }
            }
        }
    }
    .javascript-resistor-color-duo-experiment-analysis-section {
        margin-bottom:20px;
        h3 {
            background:$color-1;
            border:solid $color-1;
            border-width: 0 1px;
            color:#fff;
            padding:15px;
            i {
                color:#fff;
                margin-left:5px;
            }
        }
        .recommendation {
            padding:10px 15px;
            border-bottom:1px solid #aaa;
            font-weight:$fw-semibold;
            border:solid $color-1;
            border-width: 0 1px 1px 1px;
            margin-bottom:10px;
        }

        .comments {
            .beta {
                text-color:#666;
                font-style:italic;
                padding:10px 15px;
                background:$color-1-opaque;
                border:1px solid $color-1;
            }
            h4 {
                font-weight:$fw-bold;
                padding:15px;
            }
            .comment-with-commentary {
                margin-top:10px;
                border:1px solid $color-1;
            }
            .commentary {
                padding: 10px 15px;
                background:$color-1-opaque;
                margin-bottom:0;
               * {
                    @include font-size(14, 19);
                }
                code { &, * { font-size:13px; } }
            }
            .commentary-and-comment {
                padding:0 15px 10px 15px;
                margin:0px 0 0 0;
                border-bottom: 1px solid $color-1;
                background:$color-1-opaque;
                //font-weight:$fw-bold;
            }

            .comment.widget-code-snippet {
                position: relative;
                overflow: hidden;
                background:#fcfcfc;
                padding: 10px 15px;
                textarea {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 5px;
                    height:5px;
                    z-index:5
                }
                .copy-button {
                    z-index:10;
                }
                .editable-text-html {
                    padding-right:65px;
                    margin-bottom:0;
                   * {
                        @include font-size(14, 19);
                    }
                    code { &, * { font-size:12px; } }
                }
                &:last-child {
                    border-width:0;
                }
            }
        }
    }

    .discussion,
    .new-editable-text {
        h3 {
            padding:7px 0;
            border-bottom:1px solid #ddd;
            margin-bottom:20px;

            font-weight:$regular;
            color:#333;
        }

        .posts {
            //margin-bottom:40px;
        }
    }
    .new-editable-text {
        .approved {
            color:$color-1;
            padding-top:17px;
        }
        .button {
            margin-bottom:20px;
            background:$color-1;
            border:1px solid $color-1;
            color:#fff;
            float:right;
            margin-top:10px;
            border-radius:2px;
            padding:8px 25px;
            &.approve-button,
            &.approve-and-comment-button {
                color:$color-1;
                background:#fff;
                border:1px solid $color-1;
                margin-right:5px;
            }
            &.approve-and-comment-button {
                display:none;
            }

            &.leave-button,
            &.pass-button {
                background:#fff;
                border:1px solid #ccc;
                color:#999;
                float:left;
                &:hover {
                    background:$color-1;
                    border-color:$color-1;
                    color:#fff;
                }
            }
            &.leave-button { padding:8px 12px; }
            &.pass-button { padding:8px 15px; }
        }
    }
    .claim-section {
        clear:both;
        padding-top:15px;
        h3 {
            font-weight:$regular;
            color:#333;
            padding:7px 0;
            border-bottom:1px solid #ddd;
            margin-bottom:10px;
        }
        p {
            margin-bottom:10px;
            @include font-size(14, 19);
        }
        .pure-button {
            background:$color-1;
            color:#fff;
            margin-bottom:15px;
            &.mentor-button {
                margin-bottom:30px;
            }
        }
        .force {
            display:none;
            p {
                strong {
                    color:red;
                    font-weight:$regular;
                }
            }

            .pure-button {
                display:inline-block;
                border:1px solid $color-1;
                &.mentor-button {
                    background:#fff;
                    color:$color-1;
                }
            }
        }
    }
    .claimed-section {
        display:none;
    }
    .download-section {
        clear:both;
        padding-top:15px;
        h3 {
            font-weight:$regular;
            color:#333;
            padding:7px 0;
            border-bottom:1px solid #ddd;
            margin-bottom:10px;
        }
        p {
            margin-bottom:10px;
            @include font-size(14, 19);
        }
        .widget-code-snippet {
            input {
                width:100%;
            }
        }
    }
}
