/* Image Preview */
.wpcz .wpcz-image-preview {
    position: relative;
    grid-column: 1 / -1;
}

.wpcz .wpcz-image-preview__loader {
    position: absolute;
    inset: 0;
}

.wpcz .wpcz-image-preview__loader:before {
    display: none;
}

.wpcz .wpcz-image-preview__img-box {
    background-color: var(--wpcz-image-preview-bg-color);
    border: 1px solid var(--wpcz-image-preview-border-color);
    border-radius: var(--wpcz-radius);
    text-align: center;
}

.wpcz .wpcz-image-preview__img {
    display: inline-block;
    vertical-align: middle;
    max-inline-size: 100%;
    block-size: 12.5em;
    object-fit: contain;
}

.wpcz .wpcz-image-preview__icon-box {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.wpcz .wpcz-image-preview__icon {
    inline-size: 6em;
    block-size: 6em;
    fill: var(--wpcz-image-preview-icon-color);
}

.wpcz .wpcz-image-preview__btn-remove {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    inline-size: 2em;
    block-size: 2em;
    min-block-size: 0;
    inset-block-start: 1em;
    inset-inline-end: 1em;
    border-radius: var(--wpcz-radius-full);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.wpcz .wpcz-image-preview__btn-remove-icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    fill: currentColor;
}

.wpcz .wpcz-image-preview__img-box--has-image .wpcz-image-preview__btn-remove {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease, visibility 0s linear 0s;
}

.wpcz .wpcz-image-preview__img-box--has-image .wpcz-image-preview__icon-box {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0s linear 0s;
}