@layer components {
    :root {
        --shadow-xl: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    }

    .ui-files {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        --file-height: 120px;
    }

    .ui-files-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 15px;
        --file-height: 120px;
        .cell {
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .folder-up-button {
            cursor: pointer;
            background-color: var(--ui-100);
            border-radius: 7px;
            height: var(--file-height);
            aspect-ratio: 1/1;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: var(--shadow);
            font-size: 24px;
            color: var(--base-600);

        }
    }

    .ui-file {
        background-color: var(--bg-color);
        aspect-ratio: 1/1;
        border-radius: 7px;
        position: relative;
        display: flex;
        flex-direction: column;
        height: var(--file-height);
        box-shadow: rgba(50, 50, 93, 0.2) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px -2px 7px -3px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

        .name {
            font-size: 11px;
            letter-spacing: 0.05em;
            padding:4px;
            text-align: center;
            color: var(--base-600);
        }

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -4px;
            right: -4px;
            height: 2px;
            border-radius: 10px;
            background: linear-gradient(90deg, var(--signal) 0%, var(--signal) 100%);
            background: var(--ui-400);
        }
        /*


        &:hover:after {
            display: none;
        }

        &:hover {
            transform: translateY(-10px);
            transition: transform 0.2s;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 60px -10px, rgba(0, 0, 0, 0.04) 0px 18px 36px -18px;
            border-radius: 7px;
            width: var(--file-height);
            aspect-ratio: 1/1.4;
            height: auto;
        }
        */

    }

    @media (prefers-color-scheme: dark) {
        .ui-file {
            background-color: var(--ui-50);
        }
    }

    .ui-folder {
        aspect-ratio: 8/6;
        position: relative;
        display: flex;
        flex-direction: column;
        height: var(--file-height);
        box-shadow: var(--shadow-xl);
        border-radius: 7px;
        color: var(--folder-text,var(--ui-800));

        &:hover {
            transform: translateY(-3px);
            transition: transform 0.2s;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 60px -10px, rgba(0, 0, 0, 0.04) 0px 18px 36px -18px;
        }

        label {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 7px 14px 10px;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
            background-color: var(--ui-200);
            font-size: 11px;
            min-width: 45%;
        }

        .folder {
            margin-top: -12px;
            background-color: var(--ui-300);
            flex-grow: 1;
            border-radius: 7px;
            justify-content: center;
            align-items: center;
            display: flex;
            font-size: 22px;
        }

        &[data-color="yellow"] {
            --folder-text:#1e1104;
            label {
                background-color: var(--amber-100);
            }
            .folder {
                background-color: var(--amber-300);
            }
        }
        &[data-color="blue"] {
            --folder-text:var(--blue-800);
            label {
                background-color: var(--blue-100);
            }
            .folder {
                background-color: var(--blue-300);
            }
        }
        &[data-color="red"] {
            --folder-text:#410909;
            label {
                background-color: var(--red-100);
            }
            .folder {
                background-color: var(--red-300);
            }
        }
    }

    .document-slot {
        height: 32px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        border-top: 1px solid var(--border-color-light);
        margin: 0 5px;

        .add-document {
            color: var(--ui-600);
            display: flex;
            align-items: center;
            gap: 5px;
            opacity: 0;
            flex-grow: 1;
            &:hover {
                opacity: 1;

            }
        }
    }
}