.container {
    span {
        font-family: "JetBrains Mono", monospace;
        color: white;
    }
}

noscript.container {
    span {
        font-size: 25px;
        font-weight: bold;
    }
}

.container.unloaded {
    .window {
        width: 250px;

        span {
            font-size: 25px;
            font-weight: bold;
        }

        .progress-info {
            display: flex;
            flex-direction: row;
            margin-top: 10px;

            span {
                font-size: 15px;
                font-weight: 400;
                color: rgba(100%, 100%, 100%, 80%)
            }
        }

        .progress-bar {
            position: relative;
            margin-top: 3px;
            margin-bottom: 0;
            width: 100%;
            box-sizing: border-box;
            background-color: rgba(0%, 0%, 0%, 10%);
            border-radius: 5px;
            height: 10px;

            .progressed {
                --progress: 0%;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                background: linear-gradient(45deg, #2193b0, #ba6ded var(--progress), transparent calc((var(--progress) + 0.01%)));
                border-radius: 5px;
            }
        }
    }
}

.container.loaded {
    display: flex;
    flex-direction: row;
    padding: 100px 20px 75px;
    --difference: 350px;

    height: 100%;

    .files {
        width: calc(var(--difference) - 5px);
        height: 100%;
    }

    .window-separator {
        width: 10px;
        height: 100%;
        cursor: col-resize;
        z-index: 10;
    }

    .code {
        width: calc(100% - var(--difference) - 5px);
        height: 100%;
    }

    @media (max-width: 600px) {
        flex-direction: column;

        .files {
            width: 100%;
            height: calc(var(--difference) - 5px);
        }

        .window-separator {
            width: 100%;
            height: 10px;
            cursor: row-resize;
        }

        .code {
            width: 100%;
            height: calc(100% - var(--difference) - 5px);
        }
    }

    .window {
        align-content: flex-start;
        text-align: left;
        padding: 0;

        ul {
            cursor: pointer;
            list-style-type: none;
            padding-left: 1em;
            user-select: none;
            overflow-x: visible;
            margin: 0;
        }
    }

    .code {
        font-size: 14px;
        position: relative;

        .preview-buttons {
            position: absolute;
            right: 20px;
            top: 20px;
            width: fit-content;
            height: 40px;

            display: flex;
            flex-direction: row;
            gap: 10px;

            .preview-button {
                position: relative;

                border-radius: 5px;
                border: 1px solid #444;
                background: rgba(31, 31, 31, 0.36);
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(6px);

                height: 40px;
                min-width: 40px;

                cursor: pointer;

                svg {
                    position: absolute;
                    left: 3px;
                    top: 4px;
                    width: calc(100% - 6px);
                    height: calc(100% - 6px);

                    opacity: 0.5;
                    color: rgba(100%, 100%, 100%, 80%);
                    transition: opacity 0.2s;
                }
            }

            .preview-button:hover {
                svg {
                    opacity: 1;
                }
            }
        }

        .preview-container {
            position: absolute;
            left: 20px;
            top: 20px;
            bottom: 10px;
            right: 20px;

            overflow: auto;

            scrollbar-width: thin;
            scrollbar-color: rgba(50, 50, 50, 80%) transparent;

            .image-preview {
                position: absolute;
                left: 20px;
                top: 20px;
                max-width: calc(100% - 40px);

            }

            pre {
                margin: 0;
                background: none
            }

            .prism-container {
                position: absolute;
                left: 60px;
                top: 0;
                bottom: 0;
                right: 0;

                padding: 0;
                overflow: visible;

                * {
                    font-family: "JetBrains Mono", monospace;
                }
            }

            .line-container {
                position: absolute;
                left: 10px;
                top: 0;
                bottom: 0;
                width: 40px;

                white-space: break-spaces;
                text-align: right;
                line-height: 1.5;

                span {
                    color: rgba(100%, 100%, 100%, 50%);
                }
            }

            .generic-container {
                color: #f8f8f2;
                background: 0 0;
                text-shadow: 0 1px rgba(0, 0, 0, .3);
                font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
                font-size: 1em;
                text-align: left;
                white-space: pre;
                word-spacing: normal;
                word-break: normal;
                word-wrap: normal;
                line-height: 1.5;
                -moz-tab-size: 4;
                -o-tab-size: 4;
                tab-size: 4;
                -webkit-hyphens: none;
                -moz-hyphens: none;
                -ms-hyphens: none;
                hyphens: none;
            }
        }
    }

    .files {
        display: flex;
        flex-direction: column;

        .files-top {
            display: flex;
            flex-direction: column;
            align-items: center;

            margin-top: 10px;
            padding-left: 20px;
            padding-right: 20px;

            input {
                width: 100%;
            }
        }

        .greater-container {
            position: relative;
            width: 100%;
            height: 100%;

            .files-container {
                position: absolute;
                left: 0;
                top: 10px;
                bottom: 10px;
                right: 10px;

                overflow: auto;

                scrollbar-width: thin;
                scrollbar-color: rgba(50, 50, 50, 80%) transparent;

                .directory {
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: visible;
                }

                .expand-indicator {
                    display: inline-block;
                    margin-right: 4px;
                    transition: transform 0.2s ease;
                }

                .expand-indicator.expanded {
                    transform: rotate(90deg);
                }

                .dir-name {
                    font-weight: bold;
                }

                .nested {
                    display: none;
                }

                .nested.active {
                    display: block;
                }
            }
        }
    }
}