#editor-base-layout
{
    --ui-editor-base-layout-top: 30px;
    --ui-editor-base-layout-bot: 200px;
    --ui-editor-base-layout-right: 400px;
    --ui-editor-base-layout-left: 300px;
    display: grid;
    height: 100vh;
    grid-template-rows: var(--ui-editor-base-layout-top) 1fr var(--ui-editor-base-layout-bot); /* top | center | bottom */
    grid-template-columns: var(--ui-editor-base-layout-left) 1fr var(--ui-editor-base-layout-right); /* left | center | right */
    z-index: 10;
}

#editor-base-layout-top
{
    grid-column: 1 / 4; /* spans 3 columns */
    background: var(--ui-editor-major-panel-color);
    border: 2px solid var(--ui-editor-borders-color);
}

#editor-base-layout-left
{
    grid-row: 2 / 4; /* spans center + bot rows */
    background: var(--ui-editor-major-panel-color);
    border: 2px solid var(--ui-editor-borders-color);
    overflow-x: hidden;
    overflow-y: hidden;
}

#editor-base-layout-right
{
    grid-row: 2 / 4; /* spans center + bot rows */
    grid-column: 3;
    background: var(--ui-editor-major-panel-color);
    border: 2px solid var(--ui-editor-borders-color);
}

#editor-base-layout-center
{
    grid-row: 2;
    grid-column: 2;
    background: var(--ui-editor-major-panel-color);
    border: 2px solid var(--ui-editor-borders-color);
}

#editor-base-layout-bottom
{
    grid-row: 3;
    grid-column: 2;
    background: var(--ui-editor-major-panel-color);
    border: 2px solid var(--ui-editor-borders-color);
}