/*

Lesli

Copyright (c) 2023, Lesli Technologies, S. A.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.gnu.org/licenses/.

Lesli · Ruby on Rails SaaS development platform.

Made with ♥ by https://www.lesli.tech
Building a better future, one line of code at a time.

@contact  hello@lesli.tech
@website  https://www.lesli.tech
@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html

// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
// ·  

*/

.files {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 5px;

        .add-file{
            width: 95%;
            height: 65%;
            color: #A1A1A1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: none;
            cursor: pointer;

            span{
                margin: 10px 0;
            }
            .material-icons{
                scale: 3;
            }
        }
  
        .file-container {
            position: relative;

            img:hover, video:hover, iframe:hover,
            img:focus, video:focus, iframe:focus {
                transform: scale(1.03);
                cursor: zoom-in;
            }
        }
        
        .delete-button {
            position: absolute;
            top: 10%;
            right: 0%;
            transform: translate(-50%, -50%);
            padding: 10px;
            background-color: #FFFFFF;
            color: #252525;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        img {
            width: 95%;
            height: 65%;
            transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
        }
        
        .file-container:hover .delete-button {
            opacity: 1;
        }  
    }
     
}

.file-backdrop {
    position: fixed;
    z-index: 40;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-modal {
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);

    .buttons {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0%);
        width: 96%;
        flex-wrap: nowrap;
        justify-content: space-between
    }
    
    .nav-buttons {
        display: flex;
        justify-content: space-between;
    }
    .btn-close {
        position: absolute;
        top: 2%;
        right: 3%;
    }
}