<style>
    .kf-editor{
        grid-template-columns: 15% auto 20%;
        grid-gap:0;
        height: 100%;
    }
    .kf-editor > article{
        height: 100%;
        margin: 0;
    }
    .kf-editor > article, .kf-editor > article header{ border-color: #473; }
    .kf-editor article.agent-preview header { padding:0; }
    .kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;} 
    .kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; } 
    .kf-editor article.agent-preview section, .kf-editor article.agent-properties section{
        display: grid;
        grid-template-rows: auto 2em;
        height: 100%;
    }
    .kf-editor article.kfArena section{
        padding: 0;
        height: 100%;
        
    }
    .kf-editor article.agent-preview section div.actions button{
        color: #DDD;
        padding: 0 0 0 0;
        min-height: 0.5em;
    }
    .kf-editor button[data-trigger="onAddAgent"] { background-color: #473; }
    .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
    .kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; }
    .kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
    
</style>
<div class="kf-editor cols-3">
    <article eiccard class="agent-preview">
        <header><canvas data-output="agentSampleCanvas"></canvas></header>
        <section>
            <div>
                <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
            </div>
            <div></div>
        </section>
    </article>
    <article eiccard class="kfArena">
        <section>
            <canvas data-output="kfArenaCanvas"></canvas> 
        </section>
    </article>
    <article eiccard class="agent-properties">
        <header><h1>Agent properties</h1></header>
        <section>
            <div data-output="agentProperties"></div>
            <div class="actions cols-2">
                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
            </div>
        </section>
    </article>
    
</div>    


