.ez-field-edit--ezimageasset {
    .ez-field-edit__error {
        @include error-under-label();
    }

    &.is-invalid {
        .ez-data-source {
            @include area-invalid();
        }
    }

    .ez-field-edit-preview {
        &__media-wrapper {
            position: relative;
            display: inline-block;
        }

        &__media {
            max-width: 100%;
            width: auto;
            height: auto;
            display: block;
        }

        &__actions {
            position: absolute;
            top: calculateRem(16px);
            right: calculateRem(16px);
            width: calculateRem(40px);
            height: calculateRem(90px);
        }

        &__action--remove,
        &__action--preview {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calculateRem(40px);
            height: calculateRem(40px);
            margin-bottom: calculateRem(12px);
            background: $ibexa-color-primary;
            border: none;
            outline: none;  
            
            .ez-icon {
                fill: $ibexa-white;
            }
        }

        &__details {
            color: $ibexa-color-font;
            padding-top: calculateRem(16px);
        }

        &__file-name,
        &__file-size {
            display: inline-block;

            &:first-child {
                margin-right: calculateRem(32px);
            }
        }

        &__image-alt {
            margin-top: calculateRem(24px);
        }
    }

    .ez-data-source {
        padding: calculateRem(16px) calculateRem(30px);
        background: $ibexa-color-base-light;
    }

    .ez-field-edit-spinner {
        width: calculateRem(32px);
        height: calculateRem(32px);
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;

        .ez-icon {
            width: calculateRem(32px);
            height: calculateRem(32px);
            fill: $ibexa-black;
        }
    }
}

.ez-field-edit--is-preview-loading {
    position: relative;

    .ez-field-edit-spinner {
        display: block;
    }

    .ez-field-edit__preview {
        visibility: hidden;
    }

    .ez-field-edit__data {
        visibility: hidden;
    }
}
