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

#my-track-page .progress-section {
    padding: 30px 0 15px 0;
    border-radius:2px;
    margin-top:42px;
    @include width-medium() {
        margin-left:50px;
    }
    @include width-large() {
        background:#f9f9f9;
        padding: 30px 30px 15px 30px;
        margin-left:100px;
    }
    h2 {
        color:$color-1;
        font-weight:$bold;
        text-transform:uppercase;
        @include font-size(14, 14);
        letter-spacing:-0.7px;
        margin-bottom:3px;
        text-align:right;
    }
    .h2-subtitle {
        font-weight:$regular;
        @include font-size(13, 13);
        letter-spacing:-0.8px;
        color:#aaa;
        margin-bottom:30px;
        text-align:right;
    }
    .core, .topics, .side, .guides, .danger-zone {
        background:#f9f9f9;
        @include width-large() {
            background:#fff;
        }
        padding:20px 30px;
        margin-bottom:15px;
        h3 {
            @include font-size(13, 13);
            letter-spacing:-0.4px;
            font-weight:$regular;
            border-bottom:1px solid #f1f1f1;
            color:#777;
            margin-bottom:15px;
            padding-bottom:5px;
        }
    }
    .core {
        .percentage {
            color:$color-1;
            @include font-size(25, 25);
            font-weight:$regular;
            float:left;
            margin-right:20px;
        }
        .number {
            @include font-size(12, 12);
            color:#bbb;
            font-weight:$regular;
            margin-bottom:3px;
        }
        .completed {
            @include font-size(10, 10);
            font-weight:$regular;
            color:#bbb;
        }
    }
    .topics {
        .extra-button {
            display:block;
            background:#fff;
            color:$color-1;
            border:1px solid rgba($color-1, 0.5);
            @include font-size(12, 12);
            padding:9px;
            width:100%;
            margin:10px 0;
            &:hover {
                background:$color-1;
                border-color:$color-1;
                color:#fff;
            }
        }
        .extra {
            display:none;
        }

        .topic {
            overflow:hidden;
            margin-bottom:2px;
            @include font-size(12, 15);
            color:#9F9F9F;
            font-weight:$regular;
            .bar {
                width:80%;
                float:left;
                position:relative;
                padding:5px 5px 6px;
                .filled {
                    background:rgba($color-1, 0.1);
                    position:absolute;
                    top:0;
                    bottom:0;
                    left:0;
                    border-radius:2px;
                }
                .title {
                    position:relative;
                    font-weight:$regular;
                }
            }
            .percentage {
                padding-top:5px;
                width:20%;
                text-align:right;
                float:right;
            }
        }
    }
    .side {
        .completed {
            float:right;
            @include font-size(11, 11);
            color:#9F9F9F;
        }
        .squares {
            overflow:hidden;
            margin-bottom:15px;
            .square {
                margin:3px;
                background:#f3f3f3;
                border-radius:2px;
                width:15px;
                height:15px;
                float:left;
                &.completed {
                    background:$color-1;
                }
            }
        }
        .pure-button {
            background:#fff;
            color:$color-1;
            border:1px solid rgba($color-1, 0.5);
            @include font-size(12, 12);
            padding:9px;
            display:block;
            width:100%;
            &:hover {
                background:$color-1;
                border-color:$color-1;
                color:#fff;
            }
        }
    }
    .guides {
        ul {
            margin:0;
            padding:0 0 0 20px;
            li {
                margin:0;
                padding:0;
            }
        }
        a {
            color:#333;
            text-decoration:none;
            border-bottom:1px solid #bbb;
        }
    }
}
