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

#solutions-page,
#my-starred-solutions-page,
#exercise-page {
    .orderer {
        margin-bottom:10px;

        .label {
            display:inline-block;
            margin-right:2px;
        }

        .selectize-control {
            display:inline-block;
            vertical-align:middle;
        }
        .selectize-input {
            width:180px;
            max-width: 100%;
        }
    }
    .user-solution,
    .solution {
        border:1px solid #eee;
        border-radius:2px;
        margin:0 0 20px 0;
        padding:20px;
        display:block;
        text-decoration:none;
        overflow:hidden;
        @include width-medium() {
            margin:0 20px 20px 0;
        }
        &:hover {
            border-color:$color-2;
        }
        img {
            border-radius:100%;
            width:40px;
            height:40px;
            float:left;
            display:block;
            margin-right:10px;
        }

        .exercise {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 160px;
            @include font-size(18, 20);
            font-weight:$bold;
            color:#333;
        }
        .track {
            color:#666;
            font-weight:$fw-regular;
            @include font-size(13, 19);
            vertical-align:top;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 150px;
            overflow: hidden;
            margin-bottom:7px;
        }
        .details-bar {
            margin-top:3px;
            margin-left:50px;
            @include font-size(13, 15);
            overflow: hidden;
            height:15px;

            .handle,
            .published-at,
            .detail {
                display:inline-block;
                color:#666;
            }
            .published-at,
            .detail {
                padding-left:8px;
            }
        }
    }
    .user-solution {
        background:#fafafa;
        border:1px solid #ddd;
        color:#999;
        display:block;
        .not-published {
            float:right;
            display:inline-block;
            border:1px solid $color-2;
            background:#fff;
            text-transform:uppercase;
            @include font-size(9, 9);
            color:$color-2;
            padding:4px;
            font-weight:$bold;
            vertical-align:bottom;
            background:#fafafa;
            border-radius:2px;
        }
    }
    .solution {
        .reactions {
            background:#fafafa;
            border:1px solid #eee;
            border-radius:2px;
            overflow:hidden;
            display:inline-block;
            .reaction {
                float:left;
                border-right:1px solid #eee;
                padding:5px 8px;
                @include width-small() {
                    padding:10px 16px;
                }
                &:last-child {
                    border:none;
                }
                &.highlight {
                    i, .count {
                        color:$color-2;
                    }
                }
                .count {
                    display:inline-block;
                    @include font-size(12, 12);
                    font-weight:$regular;
                    color:#888;
                    width:14px;
                }
                i, img {
                    display:inline-block;
                    margin-right:5px;
                }

                i {
                    @include font-size(12, 12);
                    color:#aaa;
                    @include width-small() {
                        @include font-size(16, 16);
                    }
                }
                img {
                    vertical-align:bottom;
                    height:16px;
                }
            }
        }
    }
}
