.playground {
    display: grid;
    grid-template-columns: clamp(100px, 15%, 400px) auto;
    grid-template-areas:
        "header header"
        "files editor";

    > header {
        grid-area: header;
    }
    > .file-view {
        grid-area: files;
        display: flex;
        flex-direction: column;
        margin-right: 0.5cm;
        overflow-x: hidden;
        overflow-y: auto;

        > h3 {
            cursor: pointer;
        }

        .entries {
            button {
                border: none;
                width: 100%;
                text-align: left;
                background-color: transparent;
                cursor: pointer;

                &:hover {
                    background-color: var(--sl-color-gray-5);
                }

                &.selected {
                    color: var(--sl-color-text);
                    background-color: var(--sl-color-gray-6);
                }
            }
        }
    }
    > .editor {
        grid-area: editor;
    }
}

.error-terminal-display {
    background-color: black;
    padding: 15px;
    border-radius: 15px;
    font-size: 1.2em;
    line-height: 0.8em;

    --red: #ff0000;
    --cyan: #00d6d6;
    
    code {
        white-space: break-spaces;
        font-family: monospace;
    }
}

:root[data-theme="light"] {
    .error-terminal-display {
        background-color: lightgray;
        
        --red: #ff3f3f;
        --cyan: #00a6a6;
        --black: lightgray;
        --white: #4f4f4f;
    }
}