.example .split{--color-bg: #f8f8f2;--color-success: #a6e22e;height:200px}.example .split [data-split]{--resizer-len: calc(var(--gap) + .8rem);--resizer-offset: calc(-50% - var(--gap) / 2);width:100%;height:100%}.example .split [data-split-item]{position:relative}.example .split [data-split-resizer]{position:absolute;z-index:10;inset:0;border-radius:5px;background-color:var(--color-success)}.example .split [data-dir=row]>[data-split-item]>[data-split-resizer]{cursor:col-resize;height:2rem;width:var(--resizer-len);top:50%;transform:translate(var(--resizer-offset),-50%)}.example .split [data-dir=column]>[data-split-item]>[data-split-resizer]{cursor:row-resize;height:var(--resizer-len);width:2rem;left:50%;transform:translate(-50%,var(--resizer-offset))}.example .split .leaf{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--color-bg);border-radius:5px;font-size:larger}