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

@import "mediafinder.image.less";
@import "mediafinder.file.less";
@import "mediafinder.control-ui.less";

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

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

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

.field-mediafinder {
    //
    // Selected item
    //

    .item-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: -1px;
        }

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

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

        &.item-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 {
                    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;
        }
    }

    .empty-state {
        display: none;
    }

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

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

    &.is-max-reached {
        .toolbar-find-button {
            display: none;
        }
    }

    &.is-preview {
        .item-object {
            .form-check {
                display: none;
            }
        }
        a.drag-handle {
            display: none !important;
        }
    }

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

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