@import '../colors.less';

.em_challenges_list {
    .challenge_list {
        margin-bottom: 20px;
        .challenge {
            display: block;
            background: #21252b;
            padding: 10px;
            margin-bottom: 8px;
            color: #fff;
            .title {
                font-size: 18px;
            }
            .description {
                font-weight: 300;
            }
            &:hover {
                background: #2f353e;
            }
        }
    }
    .easy {
        .title {
            .badge {
                float: right;
            }
            .text {
                color: @challenge_easy;
            }
        }
    }
    .medium {
        .title {
            .badge {
                float: right;
            }
            .text {
                color: @challenge_medium;
            }
        }
    }
    .hard {
        .title {
            .badge {
                float: right;
            }
            .text {
                color: @challenge_hard;
            }
        }
    }
}
