.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;

        .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;
    }
}