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

@fileupload-progress-bar-height: 5px;
@fileupload-progress-bar-color:  #fff;
@fileupload-progress-bar-bg:     #f5f5f5;
@fileupload-inactive-icon:       #808b93;
@fileupload-object-active-bg:    #4da7e8;
@fileupload-list-accent-bg:      #f5f5f5;
@fileupload-list-border-color:   #eeeeee;

@import "fileupload.image.less";
@import "fileupload.file.less";
@import "fileupload.control-ui.less";
@import "fileupload.popup.less";

.uploader-small-loader() {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    background-size: 20px 20px;
}

//
// Shared
//

.fileupload-set-height(@size) {
    .upload-files-container {
        max-height: @size * 2;
        overflow: auto;
    }
}

.field-fileupload {
    &.size-tiny {
        .fileupload-set-height(@size-tiny);
    }
    &.size-small {
        .fileupload-set-height(@size-small);
    }
    &.size-large {
        .fileupload-set-height(@size-large);
    }
    &.size-huge {
        .fileupload-set-height(@size-huge);
    }
    &.size-giant {
        .fileupload-set-height(@size-giant);
    }
    &.size-auto {
        overflow: auto;
    }
    &.size-adaptive {
        position: absolute;
        height: 100%;
        width: 100%;
        background: @body-bg;

        .uploader-control-container {
            border: none!important;
            padding: 14px;
        }

        .empty-state {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &.is-populated {
            .empty-state {
                display: none;
            }
        }
    }
}

.field-fileupload {
    //
    // Uploaded item
    //

    .upload-object {
        position: relative;
        outline: none;
        display: block;
        margin: 4px 4px 0 4px;

        &:last-child {
            margin-bottom: 4px;
        }

        h4.filename, p {
            color: @toolbar-color;
            font-size: @font-size-base;
            word-break: break-all;

            // Stop vertical trim on overflow ellipsis
            line-height: 1.4;
            margin-bottom: 8px;
        }

        h4.filename {
            font-weight: 600;
            margin-top: -2px;
        }

        p.description {
            margin-top: -4px;
            &:empty {
                display: none;
            }
        }

        p.size {
            font-size: 0.875em;
            color: @secondary-color;
        }

        &.upload-object-image {
            h4.filename {
                padding-top: 10px;
            }
        }

        .file-data-container {
            padding: 3px;
            border-radius: @border-radius-base;

            &:hover {
                background: @toolbar-focus-bg;
            }

            .file-data-container-inner {
                position: relative;
            }
        }

        &.selected {
            .icon-container i {
                color: white;
            }

            .file-data-container {
                background: @brand-selection;

                h4.filename, p, div.error-message {
                    color: white;
                }
            }
        }

        a.drag-handle {
            position: absolute;
            display: none;
            color: @color-grey-2;
            cursor: move;
            left: -1px;
            top: 23px;
            font-size: 24px;
            text-decoration: none;
        }

        &:hover {
            a.drag-handle {
                display: block;
            }
        }

        .form-check {
            position: absolute;
            left: 3px;
            top: 2px;
        }
    }

    &.is-preview {
        .upload-object {
            .form-check {
                display: none;
            }
        }
    }

    .empty-state {
        display: none;
    }

    //
    // Loading State
    //

    .upload-object {
        .icon-container:after {
            background-image: url('../../../../../backend/assets/images/loader-transparent.svg');
            position: absolute;
            content: ' ';
            width: 40px;
            height: 40px;
            left: 50%;
            top: 50%;
            margin-top: -20px;
            margin-left: -20px;
            display: block;
            background-size: 40px 40px;
            background-position: 50% 50%;
            animation: spin 1s linear infinite;
        }

        &.is-success {
            .icon-container {
                opacity: 1;

                &:after {
                    display: none;
                }
            }
        }

        &.is-loading {
            .icon-container {
                opacity: .6;
            }
            .icon-container:after {
                display: block;
            }
        }
    }

    //
    // Success state
    //

    .upload-object.is-success {
        .file-data-container-inner {
            cursor: pointer;
        }

        .progress-bar {
            opacity: 0;
            .transition(opacity .3s ease);
        }
    }

    //
    // Error State
    //

    .upload-object.is-error {
        .file-data-container-inner {
            cursor: pointer;
        }

        .icon-container {
            opacity: 1;
            > img, > i {
                opacity: .5;
            }
        }

        .info h4 {
            color: @brand-danger;
            a {
                display: none;
            }
        }

        div.error-message {
            font-size: .875em;
        }

        .drag-handle {
            display: none !important;
        }
    }

    //
    // Preview mode
    //

    &.is-preview {
        .upload-button,
        a.drag-handle {
            display: none !important;
        }
    }

    //
    // Grid mode (small screens and above)
    //
    @media (min-width: @screen-sm-min) {
        &.is-grid .upload-files-container {
            display: flex;
            flex-wrap: wrap;
            .upload-object {
                width: 300px;

                h4.filename, p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }
    }
}