@import "../components/colors";
@import "../components/mixins";

.stm-lms-user-quizzes {
    h3 {
        margin: 0 0 30px;
    }
    .stm-lms-user-quiz {
        display: flex;
        padding: 20px;
        border: 1px solid #e1e2e4;
        margin: 0 0 10px;
        align-items: center;
        &__title {
            width: 35%;
            margin: 0;
            padding-right: 15px;
            a {
                font-weight: 700;
                color: $dark;
                font-size: 14px;
                line-height: 22px;
            }
        }
        &__name {
            width: 20%;
            padding-right: 15px;
        }
        &__progress {
            position: relative;
            top: 1px;
            padding-right: 50px;
            width: 30%;
            &_bar {
                position: relative;
                height: 5px;
                background-color: #e0e0e0;
            }
            .filled {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                background-color: $green;
                z-index: 20;
                &.failed {
                    background-color: $red;
                }
            }
            .progress-status {
                position: absolute;
                right: 0;
                top: -8px;
            }
        }
        &__status {
            width: 15%;
            padding-left: 15px;
            text-align: right;
            .status {
                display: inline-block;
                vertical-align: top;
            }
            i {
                position: relative;
                top: 2px;
                margin-right: 3px;
                font-size: 17px;
                color: #28b52e;
                &.lnr-cross {
                    color: #f00909;
                }
            }
        }
    }
    .stm-lms-user-quiz__head {
        display: flex;
        padding: 20px;
        margin: 0 0 10px;
        background: #eef1f7;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        &_title {
            width: 35%;
            padding-right: 15px;
            .form-control{
                background-color: #fff;
            }
        }
        &_quiz {
            width: 20%;
            padding-right: 15px;
        }
        &_status {

        }
    }
    + .btn {
        margin: 35px 0 40px;
    }
}

@include breakpoint(mobile) {
    .stm-lms-user-quizzes .stm-lms-user-quiz {
        flex-wrap: wrap;
        &__head {
            display: none;
        }
        > * {
            margin-bottom: 15px;
            width: 100%;
            padding-left: 0;
            text-align: left;
        }
        &__progress {
            max-width: 250px;
        }
    }
}