/* Style the patterns of files load */
.AppPatternsFilesLoad {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    background: rgb(255, 255, 255);
    border: 1px solid rgb(237, 237, 237);
    border-radius: var(--size-07);

    position: relative;
    z-index: 1;

    width: 100%;
}

    .AppPatternsFilesLoad__Loading {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background: rgba(245, 245, 245, 0.9);
        border-radius: var(--size-07);

        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 2;

        width: 100%;
        height: 100%;

        padding: var(--size-07);
    }

        .AppPatternsFilesLoad__Loading > img {
            width: 100%;
            height: auto;
            max-width: var(--icon-loading-size);
        }

    .AppPatternsFilesLoad__DragDrop {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background: rgb(245, 245, 245);
        border-radius: var(--size-07);

        position: relative;
        z-index: 1;

        width: 100%;
        min-height: var(--size-7);

        padding: var(--size-07);
    }

        .AppPatternsFilesLoadDragDrop__Zone {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            border: 0.017cm solid rgba(247, 97, 77, 0.0);
            border-radius: var(--size-07);

            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;

            width: 100%;
            height: 100%;

            transition: 0.4s;
        }

            .AppPatternsFilesLoad__DragDrop:hover > .AppPatternsFilesLoadDragDrop__Zone {
                transition: 0.2s;
                background: rgba(247, 97, 77, 0.1);
                border: 0.017cm solid rgb(247, 97, 77);
            }

        .AppPatternsFilesLoadDragDrop__Header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            width: 100%;

            margin-bottom: var(--size-07);
        }

            .AppPatternsFilesLoadDragDropHeader__Icon {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                margin-right: var(--size-04);
            }

                .AppPatternsFilesLoadDragDropHeader__Icon > img {
                    width: 100%;
                    height: auto;
                    max-width: var(--icon-button-size);

                    opacity: 0.7;
                    transition: 0.4s;
                }

                    .AppPatternsFilesLoad__DragDrop:hover .AppPatternsFilesLoadDragDropHeader__Icon > img {
                        transition: 0.2s;
                        opacity: 1.0;
                    }

            .AppPatternsFilesLoadDragDropHeader__Title {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;

                font-weight: 500;
                text-align: left;
            }

        .AppPatternsFilesLoadDragDrop__Description {
            display: block;

            color: rgb(127, 127, 127);
            text-align: center;

            width: 100%;
        }

    .AppPatternsFilesLoad__List {
        display: none;
        align-items: flex-start;
        justify-content: flex-start;

        grid-template-columns: repeat(auto-fill, minmax( 17%, 1fr ));

        width: 100%;

        gap: var(--size-07);
        padding: var(--size-07);
    }

    @media screen and (max-width: 900px){
        .AppPatternsFilesLoad__List {
            grid-template-columns: repeat(auto-fill, minmax( 25%, 1fr ));
        }
    }

        @media screen and (max-width: 650px){
            .AppPatternsFilesLoad__List {
                grid-template-columns: repeat(auto-fill, minmax( 45%, 1fr ));
            }
        }

        .AppPatternsFilesLoadList__Item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            border: 1px solid rgb(237, 237, 237);
            border-radius: var(--size-07);

            height: 100%;

            padding: var(--size-04);
        }

            .AppPatternsFilesLoadListItem__Functions {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;

                width: 100%;

                margin-bottom: var(--size-02);
            }

            .AppPatternsFilesLoadListItem__Name {
                display: block;

                text-align: center;
                word-break: break-all;

                width: 100%;
                height: 100%;
                min-height: var(--size-3);

                padding: var(--size-02);
                margin-bottom: var(--size-02);
            }

            .AppPatternsFilesLoadListItem__Size {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                color: rgb(127, 127, 127);
                text-align: center;

                width: 100%;
            }

/* HTML THE TEMPLATE */
/* <div class="AppPatternsFilesLoad" data-name="tasks-create-files">
    <input type="file" multiple hidden>
    <div class="AppPatternsFilesLoad__Loading">
        <img src="/server/administration-panel/assets/images/system/layer-loading.svg">
    </div>
    <div class="AppPatternsFilesLoad__DragDrop">
        <div onclick="this.parentNode.parentNode.querySelector( 'input' ).click();" class="AppPatternsFilesLoadDragDrop__Zone" draggable="true"></div>
        <div class="AppPatternsFilesLoadDragDrop__Header">
            <div class="AppPatternsFilesLoadDragDropHeader__Icon">
                <img src="/assets/images/system/icons/folder.svg">
            </div>
            <div class="AppPatternsFilesLoadDragDropHeader__Title">
                Прикрепить файлы
            </div>
        </div>
        <div class="AppPatternsFilesLoadDragDrop__Description">
            Для загрузки файлов, просто перетащите их в эту область.
        </div>
    </div>
    <div class="AppPatternsFilesLoad__List">
        <div class="AppPatternsFilesLoadList__Item">
            <div class="AppPatternsFilesLoadListItem__Functions">
                <button class="ButtonContext"><i class="icon-remove"></i></button>
            </div>
            <div class="AppPatternsFilesLoadListItem__Name">
                Имя файла
            </div>
            <div class="AppPatternsFilesLoadListItem__Size">
                192 kb
            </div>
        </div>
    </div>
</div> */