/* 
    Created on : 2026年1月30日, 11:35:41
    Author     : sarkuya
*/

:root {
    color-scheme: light dark;
}

/*
 * Element which has grid-template-columns and grid-template-rows
 *   SHOULD NOT uses Nested CSS style
 *   to be seen by Split.js
*/
main {
    grid-template-columns: 150px 5px 1fr 5px 150px;
    grid-template-rows: 1fr 5px 150px;
}

html {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;

    display: grid;

    > body {
        margin: 0;
        padding: 0;
        
        color: light-dark(var(--light-body-color), var(--dark-body-color));
        background-color: light-dark(var(--light-body-bg-color), var(--dark-body-bg-color));

        display: grid;
        grid-template-rows: auto 1fr auto;
        
        > h1 {
            text-align: center;
            color: light-dark(var(--light-h1-color), var(--dark-h1-color));
        }

        > main {
            max-width: 100vw;
            
            border: 0px solid gray;
            display: grid;

            & * {
                box-sizing: border-box;
            }

            > #toolbar-panel {
                border: 1px solid gray;
                overflow: scroll;
            }

            > .gutter-horizontal,
            > .gutter-vertical {
                background-color: transparent;
                background-repeat: no-repeat;
                background-position: 50%;

                &.gutter-horizontal {
                    cursor: col-resize;
                    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
                }

                &.gutter-vertical {
                    cursor: row-resize;
                    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
                }
            }

            > #editor-panel {
                border: 1px solid gray;

                > svg {
                    width: 100%;
                    height: 100%;
                }
            }

            > #console-panel {
                border: 1px solid gray;
                overflow: scroll;
            }

            > #props-panel {
                border: 1px solid gray;
            }

            > #toolbar-panel {
                grid-row: 1 / span 3;
                grid-column: 1;
            }

            > #horz-gutter-1 {
                grid-row: 1 / span 3;
                grid-column: 2;
            }

            > #editor-panel {
                grid-row: 1;
                grid-column: 3;
            }

            > #vert-gutter-1 {
                grid-row: 2;
                grid-column: 3;
            }

            > #console-panel {
                grid-row: 3;
                grid-column: 3;
            }

            > #horz-gutter-2 {
                grid-row: 1 / span 3;
                grid-column: 4;
            }

            > #props-panel {
                grid-row: 1 / span 3;
                grid-column: 5;
            }
        }

        > footer {
            text-align: right;
            font-size: 0.8rem;
            opacity: 0.5;
            margin: 0 0.5em;
        }
    }
}