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

#modal.my-track-started,
#modal.my-track-finished,
#modal.my-track-v1-migration,
#modal.change-to-independent-mode,
#modal.change-to-mentored-mode,
#modal.leave-track,
#modal.pause-track,
#modal.unpause-track {
    max-width:540px;
    padding:50px 15px 50px 15px;
    @include width-small() {
        padding:50px 50px 50px 50px;
    }
    img {
        display:block;
        width:100px;
        margin: 0 auto 15px auto;
    }
    h2 {
        @include font-size(20, 20);
        font-weight:$regular;
        color:#555;
        margin-bottom:4px;
        text-align:center;
        i {
            margin-right:5px;
        }
    }
    h3 {
        @include font-size(14, 14);
        color:#555;
        font-weight:$fw-regular;
        text-align:center;
        margin-bottom:20px;
    }
    p {
        text-align:center;
        color:#555;
        @include font-size(14, 20);
        margin-bottom:20px;
    }
    .pure-button {
        background:$color-1;
        display:block;
        width:280px;
        padding:11px 10px;
        text-align:center;
        margin: 0 auto 0;
    }
}

#modal.my-track-started {
    max-width:530px !important;
    @include width-small() {
        max-height:85% !important;
    }
    .learn-more {
        margin-top: 20px;
        border-top: 1px solid #ddd;
        padding-top: 20px;


        @include font-size(13, 16);
        text-align:center;
        a {
            color:#333;
        }
    }
    p strong { font-weight:500 }
    .buttons {
        text-align:center;
        .pure-button {
            display:inline-block;
            width:100%;
            margin-bottom:10px;
            @include width-medium() {
                width:48%;
                margin-bottom:0;
            }
            border:1px solid $color-1;
            padding: 10px 13px;
            font-weight:$regular;
            &.independent-mode-button {
                border:1px solid $color-1;
                background:#fff;
                color:$color-1;
                font-weight:$fw-regular;
            }
            &.oversubscribed-button {
                width:100%;
            }
        }
    }
    .main-section {
        //display:none;
    }
    .start-section {
        display:none;
        .get-started-button {
            width:100%;
        }
    }
}

#modal.my-track-v1-migration {
    .pure-button {
        margin: 0 auto;

        display:inline-block;
        width:auto;
        border:1px solid $color-1;
        padding: 10px 13px;
        font-weight:$regular;
        width:100%;

        &.normal-mode {
            width:59%;
        }
        &.independent-mode {
            border:1px solid $color-1;
            background:#fff;
            color:$color-1;
            font-weight:$fw-regular;
            width:40%;
        }
    }
}

#modal.change-to-independent-mode,
#modal.change-to-mentored-mode,
#modal.leave-track,
#modal.pause-track,
#modal.unpause-track {
    .pure-button {
        margin: 0 auto;

        display:inline-block;
        border:1px solid $color-1;
        padding: 10px 13px;
        font-weight:$regular;
        width:100%;

        &.action-button {
            margin-bottom:15px;
            @include width-medium() {
                width:69%;
                margin-bottom:0;
            }
        }
        &.cancel-button {
            border:1px solid $color-1;
            background:#fff;
            color:$color-1;
            font-weight:$fw-regular;
            @include width-medium() {
                width:30%;
            }
        }
    }
}
