scratch-www/src/components/thumbnail/thumbnail.scss

@import "../../colors";

.thumbnail {
    .thumbnail-image {
        display: block;
    }

    .thumbnail-image img {
        margin-bottom: 2px;
        border: 1px solid $ui-border;
    }

    $extras: ".thumbnail-creator, .thumbnail-loves, .thumbnail-remixes";

    .thumbnail-title,
    #{$extras} {
        line-height: normal;
        word-wrap: break-word;

        a {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .thumbnail-title {
        margin-bottom: 1px;
        font-size: .9230em;
        font-weight: 800;

        a {
            display: block;
        }
    }

    #{$extras} {
        color: $type-gray;
        font-size: .8462em;

        a {
            display: inline;
        }
    }

    &.project {
        $project-width: 144px;
        $project-height: 108px;
        width: $project-width;

        img {
            width: $project-width;
            height: $project-height;
        }
    }

    &.gallery {
        $gallery-width: 170px;
        $gallery-height: 100px;
        width: $gallery-width;

        img {
            width: $gallery-width;
            height: $gallery-height;
        }
    }
}