@import "../../../../../modules/backend/assets/less/core/boot.less";

.blog-post-preview .editor-preview {
    .preview-content {
        padding: 20px;
    }

    span.image-placeholder {
        display: block;

        .upload-dropzone {
            background: #ecf0f1;
            display: block;
            border: 1px solid #e5e9ec;
            padding: 25px;
            min-height: 123px;
            position: relative;
            text-align: center;
            cursor: pointer;
            .box-sizing(border-box);

            span.label {
                color: #b1b9be;
                font-size: 16px;
                display: inline-block;
                margin-top: 25px;
            }

            &:before {
                display: inline-block;
                .icon(@picture-o);
                position: absolute;
                left: 25px;
                top: 25px;
                line-height: 100%;
                font-size: 73px;
                color: #d1d3d4;
            }

            &.hover, &:hover {
                background: #2f99da;

                &:before, span.label {
                    color: white;
                }
            }
        }

        input[type=file] {
            position: absolute;
            left: -10000em;
        }
    }
}

.blog-post-preview-container {
    .loading-indicator {
        position: absolute;
        display: none;
        width: 20px;
        height: 20px;
        padding: 0!important;
        background: transparent;
        right: 10px;
        left: auto;
        top: 10px;
    }

    &.loading-indicator-visible {
        .loading-indicator {
            display: block;
        }
    }
}

html.cssanimations {
    .blog-post-preview {
        span.image-placeholder.loading {
            .upload-dropzone {
                &:before {
                    display: none;
                }

                .indicator {
                    display: block;
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    left: 35px;
                    top: 35px;
                    background-image:url('../../../../../modules/system/assets/ui/images/loader-transparent.svg');
                    background-size: 50px 50px;
                    background-position: 50% 50%;
                    .animation(spin 1s linear infinite);
                }
            }
        }
    }
}