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

#my-solution-unlocked-page {
    padding-bottom:30px;
    .track-header {
        margin-bottom:30px !important;
    }

    .lhs {
        @include width-medium() {
            padding-right:60px;
        }
    }
    .rhs {
        margin-top:15px;
        @include width-medium() {
            margin-top:0;
            padding-left:60px;
            border-left:1px solid #e5e5e5;
        }
    }

    .instructions {
        iframe {
            margin-bottom:20px
        }
        h2 {
            @include font-size(18, 18);
            font-weight:$regular;
            margin-bottom:15px;
        }

        .rendered {
            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:$regular;
                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;
                text-decoration:none;
                border-bottom:1px solid #ccc;
                font-weight:$fw-regular;
                word-wrap:break-word;
            }
            li {
                margin-bottom: 4px;
                li {
                    margin-bottom:0;
                }
            }

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

    .experienced {
        padding:20px;
        border:1px solid #e5e5e5;
        border-radius:2px;
        margin-bottom:20px;

        h3 {
            font-weight:$regular;
            @include font-size(14, 14);
            margin-bottom:6px;
        }
        .widget-code-snippet input {
            width:90%;
        }
        .step {
            margin-bottom:20px;
            &:last-child {
                margin-bottom:0;
            }
        }
        p {
            margin-top:7px;
            color:#999;
            @include font-size(13, 13);
        }
    }
    .newbie {
        background:#fafffe;
        border:1px solid $color-1;
        padding:20px;
        border-radius:2px;
        margin-bottom:20px;

        h3 {
            font-weight:$regular;
            @include font-size(16, 16);
            margin-bottom:10px;
        }
        p {
            @include font-size(13, 18);
            margin-bottom:10px;
        }
        .pure-button {
            background:$color-1;
            color:#fff;
            display:block;
            width:100%;
            padding:10px;
        }
    }

    .page-links {
        padding:20px;
        border:1px solid #e5e5e5;
        border-radius:2px;

        h3 {
            font-weight:$regular;
            @include font-size(16, 16);
            margin-bottom:12px;
        }
        a {
            color:#333;
        }
        ul {
            margin-bottom:0;
        }
    }
}

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