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

#my-solution-page .rhs,
#teams-solution-page .rhs,
#teams-my-solution-page .rhs {
    h3.rhs-heading {
        padding:7px 0;
        border-bottom:1px solid #ddd;
        margin-bottom:20px;

        font-weight:$regular;
        color:#333;
        &.disabled {
            color:#ccc;
        }
    }
    p.disabled {
        @include font-size(14, 18);
        a {
            color:#333;
        }
    }
    .approved-section,
    .next-steps {
        background:rgba($color-1, 0.05);
        border-radius:2px;
        padding:20px 20px 20px 20px;
        margin-bottom:20px;
        @include width-small() {
            padding:20px 40px 20px 20px;
        }
        .title {
            @include font-size(16, 16);
            font-weight:$regular;
            color:$color-1;
            letter-spacing: -0.5px;
            margin-bottom:13px;
        }
        p {
            @include font-size(14, 18);
            @include width-small() {
                padding-left:19px;
            }
            margin-bottom:10px;
            &:last-child {
                margin-bottom:0;
            }
            a {
                color:#333;
                font-weight:$fw-regular;
            }
        }
        .pure-button {
            margin-top:0;
            @include width-small() {
                margin-left:20px;
            }
        }
        .pure-button+p {
            margin-top:10px;
        }
    }
    .pane.markdown,
    .pane.preview {
        padding:0;
    }

    .posts+form {
        margin-top:40px;
    }
    form {
        margin:20px 0 20px 0;
        textarea, .preview-area {
            width:100%;
            resize:none;
            padding:15px;
            border:1px solid #ddd;
        }
    }
    .complete-button,
    .comment-button {
        margin-top:10px;
        border-radius:2px;
        padding:8px 25px;
        width:100%;
        @include width-small() {
            width:auto;
        }
    }
    .complete-button {
        &.unapproved {
            background:#fff;
            border:1px solid #ddd;
            color:#ddd;
            float:left;
            &:hover {
                border:1px solid red;
                color:red;
            }
        }
        &.independent {
            background:$color-1;
            color:#fff;
            float:left;
        }
        &.approved {
            background:$color-1;
            color:#fff;
        }
    }
    .comment-button {
        background:$color-1;
        color:#fff;
        float:right;
        &.faded {
            background:#fff;
            border:1px solid #aaa;
            color:#666;
        }
    }
    .request-mentoring {
        margin-top:5px;
        background:$color-1;
        color:#fff;
    }
}
