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