// Handles the styling of the badges (logos) of the different projects. This SCSS loops over the different kinds
// of projects, and loads the proper background image for each kind of project.

$projects:
    (encode,      'badge-encode.svg',      'badge-encode.png'),
    (encode2,     'badge-encode2.svg',     'badge-encode2.png'),
    (encode3,     'badge-encode3.svg',     'badge-encode3.png'),
    (encode4,     'badge-encode4.svg',     'badge-encode4.png'),
    (roadmap,     'badge-roadmap.svg',     'badge-roadmap.png'),
    (modencode,   'badge-modencode.svg',   'badge-modencode.png'),
    (modern,      'badge-modern.svg',      'badge-modern.png'),
    (ggr,         'badge-ggr.png',         'badge-ggr.png'),
    (mouseencode, 'badge-mouseencode.svg', 'badge-mouseencode.png'),
    (community,   'badge-community.svg',   'badge-community.png'),
    (encore,      'badge-encore.svg',      'badge-encore.png');

@each $project, $badgefile, $badgefilenosvg in $projects {
    .badge-#{$project} {
        display: block;
        height: 80px;
        margin-top: 10px;
        background-image: url(/static/img/#{$badgefile});
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: contain;

        .no-svg & {
            background-image: url(/static/img/#{$badgefilenosvg});
        }

        &.badge-heading {
            position: absolute;
            margin-top: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: auto;
            background-position: top right;
        }
    }
}

// Badges of experiment.tags
.tag-badges {
    display: block !important;

    dt {
        display: block !important;
        padding-bottom: 0 !important;
    }

    dd {
        display: block !important;
        padding-top: 0 !important;
        padding-left: 0 !important;

        img {
            display: inline-block;
            margin: 0 2px 2px 0;
            padding: 4px;
            height: 32px;
            background-color: #e8e8e8;
            border: 1px solid #e0e0e0;
        }
    }
}
