@import (reference) '../customize/src/less2/include/colortheme-all.less';
@import (reference) '../customize/src/less2/include/modal.less';

.fileDialog_main () {
    #fileDialog {
        .modal_main();
        display: none;
        .cp-modal {
            .fileContainer {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                overflow-y: auto;
            }

            .element {
                @darker: darken(@colortheme_modal-fg, 30%);

                width: 200px;
                min-width: 200px;
                height: 1em;
                padding: 0.5em;
                margin: 5px;
                box-sizing: content-box;

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

                background-color: #111;
                color: @darker;

                transition: all 0.1s;

                &:hover {
                    color: @colortheme_modal-fg;
                }

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                align-items: center;

                .fa {
                    cursor: pointer;
                    margin-right: 0.5em;
                }
            }
        }
    }
}