@use "../../../bulma/sass/utilities" as bulma-utilities;

$image-placeholder-blur-enabled: true !default;
$image-placeholder-blur: 10px !default;

// Map Local variables
$-css-vars-map: (
    "image-placeholder-blur": $image-placeholder-blur,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("b-image-wrapper", $-css-vars-map);

.b-image-wrapper {
    > img {
        object-fit: cover;

        &.has-ratio,
        &.placeholder {
            @extend %overlay;

            width: 100%;
            height: 100%;
        }

        @if $image-placeholder-blur-enabled {
            &.placeholder {
                filter: blur(var(--image-placeholder-blur));
            }
        }
    }
}