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