.example .editor{--color-bg:#f8f8f2;--color-selected:#ccccc7;--color-border:#272822;--color-success:#a6e22e;color:var(--color-border);height:500px}.example .editor button{all:unset;justify-content:center;align-items:center;display:inline-flex}.example .editor button:focus{outline:1px solid var(--color-border)}.example .editor .button{cursor:pointer;background-color:var(--color-bg);border-radius:10px;gap:.5rem;padding:.5rem}.example .editor .button:hover{background:var(--color-selected)}.example .editor [data-tabs]{background-color:var(--color-bg);border-radius:10px;flex-direction:column;gap:2px;width:100%;height:100%;display:flex}.example .editor [data-tabs-bar]{align-items:center;padding:.4rem;display:flex;overflow:hidden}.example .editor [data-tabs-list]{scrollbar-width:thin;gap:.2rem;min-width:0;display:flex;overflow-x:auto}.example .editor [data-tabs-spacer]{border-radius:10px;flex-grow:1;height:100%}.example .editor [data-tabs-spacer][data-over=true]{background-color:var(--color-success)}.example .editor [data-tabs-actions]{align-items:center;gap:.5rem;display:flex}.example .editor [data-tabs-header]{background-color:var(--color-bg);border-radius:10px;flex-shrink:0;align-items:center;gap:.3rem;padding:.4rem;display:flex;width:min-content!important;height:min-content!important}.example .editor [data-tabs-header]>:first-child{cursor:move}.example .editor [data-tabs-header]>span{text-wrap:nowrap;min-width:1ch;padding:.1rem .3rem}.example .editor [data-tabs-header][aria-selected=true]{background-color:var(--color-selected)}.example .editor [data-tabs-header][data-over=true]{background-color:var(--color-success)}.example .editor [data-tabs-content]{flex:1 1 0;justify-content:stretch;align-items:stretch;padding:.2rem;display:flex;position:relative}.example .editor [data-tabs-content]>textarea{resize:none;border:1px solid var(--color-border);background-color:#0000;border-radius:10px;flex-grow:1;padding:.4rem}.example .editor [data-tabs-content]:after{content:"";pointer-events:none;background:var(--color-success);border-radius:10px;transition:inset .16s;position:absolute}.example .editor [data-tabs-content][data-over=true]:after{opacity:.4}.example .editor [data-tabs-content][data-over=true][data-hpart=center][data-vpart=center]:after{inset:0}.example .editor [data-tabs-content][data-over=true][data-hpart=start]:after{inset:0 50% 0 0}.example .editor [data-tabs-content][data-over=true][data-hpart=end]:after{inset:0 0 0 50%}.example .editor [data-tabs-content][data-over=true][data-hpart=center][data-vpart=start]:after{inset:0 0 50%}.example .editor [data-tabs-content][data-over=true][data-hpart=center][data-vpart=end]:after{inset:50% 0 0}.example .editor [data-tabs-empty]{flex:1 1 0;justify-content:center;align-items:center;display:flex}.example .editor [data-split]{--resizer-len:calc(var(--gap) - 4px);--resizer-offset:calc(-50% - var(--gap) / 2);width:100%;height:100%}.example .editor [data-split-item]{position:relative}.example .editor [data-split-resizer]{position:absolute;inset:0}.example .editor [data-dir=row]>[data-split-item]>[data-split-resizer]{cursor:col-resize;width:var(--resizer-len);transform:translateX(var(--resizer-offset))}.example .editor [data-dir=column]>[data-split-item]>[data-split-resizer]{cursor:row-resize;height:var(--resizer-len);transform:translateY(var(--resizer-offset))}