@import (reference) '../../customize/src/less2/include/colortheme-all.less';
@import (reference) '../../customize/src/less2/include/modal.less';
@import (reference) '../../customize/src/less2/include/icon-colors.less';
@import (reference) '../../customize/src/less2/include/fileupload.less';
@import (reference) '../../customize/src/less2/include/alertify.less';
@import (reference) '../../customize/src/less2/include/tippy.less';
@import (reference) '../../customize/src/less2/include/checkmark.less';
@import (reference) '../../customize/src/less2/include/password-input.less';
@import (reference) '../../customize/src/less2/include/modals-ui-elements.less';
@import (reference) '../../customize/src/less2/include/usergrid.less';
@import (reference) '../../customize/src/less2/include/forms.less';

&.cp-app-secureiframe {
    .modals-ui-elements_main();
    .iconColors_main();
    .fileupload_main();
    .alertify_main();
    .tippy_main();
    .checkmark_main(20px);
    .password_main();
    .modal_main();
    .usergrid_main();
    .forms_main();

    #cp-filepicker-dialog {
        display: none;
        .cp-modal {
            .cp-filepicker-content {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                overflow-y: auto;
            }

            .cp-loading-spinner-container {
                height: 100px;
                .cp-spinner {
                    border-color: @cryptpad_color_brand;
                    border-top-color: transparent;
                }
            }

            .cp-filepicker-content-element {
                width: 125px;
                //min-width: 200px;
                //height: 1em;
                padding: 10px;
                margin: 5px;

                display: inline-flex;
                flex-flow: column;

                box-sizing: content-box;

                text-align: left;
                line-height: 1em;
                cursor: pointer;

                background: @cp_drive-bg;
                color: @cp_drive-fg;
                border: 1px solid @cp_drive-icon-border;

                transition: all 0.1s;

                &:hover {
                    background: @cp_drive-icon-hover;
                }

                align-items: center;

                img {
                    max-width: 100px;
                    max-height: 100px;
                    background: @cp_drive-thumb-bg;
                }

                .cp-filepicker-content-element-name {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 20px;
                    line-height: 20px;
                    margin-top: 5px;
                    max-width: 100%;
                }
                .fa, .cptools {
                    cursor: pointer;
                    width: 100px;
                    height: 100px;
                    font-size: 70px;
                    text-align: center;
                    line-height: 100px;
                }
            }
        }
    }
}