@mixin extension-template($element, $color, $active-color){
    .image-view {
        @include colorize-image-view($color);
    }
    @if($element == "menu") {
        &:focused {
            .image-view {
                @include colorize-image-view($active-color);
            }
        }
    } @else {
        &:selected, &:hover {
            @if($element == "tab") {
                .tab-container {
                    .tab-label {
                        .image-view {
                            @include colorize-image-view($active-color);
                        }
                    }
                }
            } @else {
                .image-view {
                    @include colorize-image-view($active-color);
                }
            }
        }
    }
}

@mixin extensions ($element) {
    &.resource {
        @include extension-template($element, -df-unknown-file, -df-unknown-file-active)
    }

    &.resource-folder {
        @include extension-template($element, -df-folder, -df-folder-active)
    }

    &.resource-ext- {
        /* Script files */
        &fp, &gui_script, &lua,
        &render_script, &script, &vp {
            @include extension-template($element, -df-script-file, -df-script-file-active);
        }

        /* Design files */
        &atlas, &collection, &collisionobject,
        &cubemap, &dae, &font, &go,
        &gui, &label, &model, &particlefx,
        &rivemodel, &rivescene, &sprite,
        &tilemap, &tilesource {
            @include extension-template($element, -df-design-file, -df-design-file-active);
        }

        /* Property container files */
        &animationset,
        &camera, &collectionfactory, &collectionproxy,
        &display_profiles, &factory,
        &gamepads, &input_binding, &material, &project,
        &render, &sound, &texture_profiles {
            @include extension-template($element, -df-property-file, -df-property-file-active);
        }
    }
}
