@import "../../../styles/includes.scss";



.upload_area {    
    padding: 25px;


    section{
        &::after{
            content: '';
            display: table;
            clear: both;
        }

        display: block;
        contain: content;
        box-sizing: border-box;
        background: #424242;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);

        .drag-and-drop {
            @include grid-container();
            @include grid-flex-align-items(center, center);
            
            border: 4px dashed #FFF; // Adjust color as needed
            width: 100%; // Adjust width as needed
            height: 100%; // Adjust height as needed
            padding: 30px;

            margin-bottom: 30px;

            text-align: center;
            cursor: pointer;

            .file-block {
                border: 1px solid #FFF;

                font-size: 10px;
                padding: 15px;
                border-radius: 15px;

                .close-btn {
                    border: 1px solid #FFF;
                    padding: 5px;
                    font-weight: bold;
                    margin-left: 10px;
                    border-radius: 15px;
                }
            }

            &.hover{
                position: relative;

                &:before{
                    content: '';
                    background: #CCC;
                    opacity: 0.4;

                    position: absolute;

                    width: 100%;
                    height: 100%;
                }

                p{
                    font-weight: bold;
                }
            }        
        }

        h3{
            padding: 0 15px;
        }

        article {
            padding: 15px;
        }
        

        button {
            background: var(--accent-fill-rest);
            color: var(--foreground-on-accent-rest);
            font-size: 14px;
            padding: 10px;        
            box-shadow: none;
            border-radius: 5px;
            border-style: solid;
            border-color: var(--accent-fill-rest);
            border-width: 1px;

            fill: currentcolor;
            cursor: pointer;        

            &.outline{
                background: none;                
            }

            &.next{
                float: right;
            }            
        }
    }    
}