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

#exercises-page {
    .header {
        background-color: $color-2;
        h1 {
            @include width-large() {
                float:left;
            }
        }
        .h1-subtitle {
            @include font-size(12, 12);
            color:#fff;
            opacity:0.75;
            font-weight:$fw-regular;
            clear:both;
        }
        .num-solutions {
            float:right;
            color:#ededed;
            font-weight:$bold;
            @include font-size(11, 14);
            text-transform:uppercase;
        }
        .status {
            position:relative;
            float:right;
            margin-top:40px;
            background:#fff;
            color:333;
            @include font-size(10, 10);
            font-weight:$regular;
            border-radius:5px;
            border:1px solid $color-2;
            text-transform:uppercase;
            color:#555;
            font-weight:$bold;
            padding:9px 15px;
        }
        .pure-button {
            float:left;
            margin-top:15px;
            margin-bottom:15px;
            @include width-large() {
                float:right;
                margin-top:35px;
                margin-bottom:0;
            }
            border:1px solid #fff;
            @include font-size(15, 15);
            font-weight:$regular;
            border-radius:2px;
            background:#00bac9;
            padding:12px 35px;
            color:#fff;

            background:$color-3;
            color:#fff;
        }
    }
    .exercises {
        background:#f9f9f9;
        padding:45px 0;

        .pure-g {
            clear:both;
        }

        .exercise {
            display:block;
            background:#fff;
            color:#333;
            text-decoration:none;
            border:1px solid $line-color-1;
            padding:20px;
            margin: 0 20px 20px 0;
            height:132px;
            position:relative;
            border-radius:2px;
            margin: 0 20px 20px 0;
            &:hover {
                background:$color-2-opaque;
                border-color:$color-2;
            }

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

                .img {
                    width:68px;
                    height:68px;
                    background-repeat:no-repeat;
                    background-size:contain;
                    background-position:center center;
                }
            }
            h3 {
                @include font-size(18, 19);
                font-weight:$bold;
                margin-bottom:7px;
                text-overflow:ellipsis;
                white-space:nowrap;
                overflow:hidden;
            }
            .stats {
                padding-top:4px;
                overflow:hidden;
                margin-bottom:10px;
                @include font-size(10, 10);
                text-transform:uppercase;
                float:right;

                .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 }
                }
            }
            .details {
                max-height:60px;
                overflow:hidden;
                summary {
                    @include font-size(14, 18);
                    margin-bottom:5px;
                    max-height:57px;
                    overflow:hidden;
                }
            }
            .topics {
                overflow:hidden;
                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;
                }
            }
        }
    }
}
