.root {
    /*
     * For customization, we provide an empty root.
     * These styles will be applied to the image container.
     */
}

.container {
    composes: relative from global;
}

.image {
    /*
     * For customization, we provide an empty image class.
     * These styles will be applied directly to the image itself.
     */
}

.loaded {
    composes: absolute from global;
    composes: left-0 from global;
    composes: top-0 from global;
    composes: visible from global;
}

.notLoaded {
    composes: loaded;

    @apply invisible;
}

.placeholder {
    composes: bg-transparent from global;
    composes: left-0 from global;
    composes: relative from global;
    composes: top-0 from global;
}

.placeholder_layoutOnly {
    composes: placeholder;

    composes: bg-transparent from global;
}