@charset "UTF-8";
@use "../../core/jkl";

@layer jokul.components {
    .jkl-image {
        display: block;
        overflow: hidden;
        position: relative;

        &__placeholder {
            filter: blur(20px);
        }

        &__image {
            @include jkl.motion("standard", "lazy");
            transition-property: opacity;
            opacity: 1;
        }

        &__image,
        &__placeholder {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            object-fit: cover;
        }

        &--loading {
            .jkl-image__image {
                opacity: 0;
            }
        }
    }
}