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

.widget-side-exercise {
    display:block;
    background:#fff;
    color:#333;
    text-decoration:none;
    border:1px solid $line-color-1;
    padding:20px;
    margin: 0 20px 20px 0;
    height:112px;
    position:relative;
    border-radius:2px;
    &:hover {
        background:$color-2-opaque;
        border-color:$color-2;
    }
    &.locked {
        opacity:0.5;
        &:hover {
            background:#fff;
            border-color:$line-color-1;
        }
    }
    &.unlocked {
        .status { color: #999 }
        border-color:rgba($color-2, 0.6);
    }
    &.in-progress, &.mentoring-requested, &.approved {
        border:2px solid $color-2;
        .icon {
            background:#fff;
            border-color:$color-2;
        }
        .status { color: $color-2 }
    }
    &.completed {
        overflow:hidden;
        border:1px solid $color-2;
        .icon {
            background:$color-2;
            border-color:$color-2;
        }
        .status {
            color: #fff;
            position:relative;
            i {
                margin-right: -11px;
                margin-top: -11px;
                display: block;
                position:relative;
            }

            &:before {
                width:90px;
                height:90px;
                position:absolute;
                right:-70px;
                top:-70px;
                content: "";
                background:$color-2;
                transform: rotate(45deg);
            }
        }
    }

    &.locked .status.locked,
    &.unlocked .status.unlocked,
    &.in-progress .status.in-progress,
    &.mentoring-requested .status.mentoring-requested,
    &.approved .status.approved,
    &.completed .status.completed {
        display: block;
    }

    .status {
        float:right;
        display:none;
        margin-left:10px;
    }

    .icon {
        display:block;
        width:70px;
        height:70px;
        padding:10px;
        float:left;
        margin-right:15px;
        border-radius:2px;
        border:1px solid $line-color-1;
        background:#fff;

        .img {
            width:48px;
            height:48px;
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center center;
        }
    }
    .title {
        @include font-size(18, 20);
        font-weight:$bold;
        margin-bottom:10px;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
    }
    .stats {
        overflow:hidden;
        margin-bottom:10px;
        @include font-size(10, 10);
        text-transform:uppercase;

        .length {
            display:inline-block;
            margin-right:5px;
            padding-right:5px;
            border-right:1px solid #aaa;
            color:#aaa;
            font-weight:$regular;
        }
        .difficulty {
            display:inline-block;
            font-weight:$bold;

            &.easy { color: $color-1; }
            &.medium { color: #f48b00 }
            &.hard { color: #f34a56 }
        }
    }
    .topics {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        height:21px;
        .topic {
            @include font-size(11, 11);
            display:inline-block;
            font-weight:$regular;
            background:#eee;
            color:#999;
            padding:3px 6px 4px;
            border-radius:2px;
        }
    }
}
