/* Paneel-splitter (gedeeld component, zie components/paneel-splitter.js). Versleepbare scheidslijn tussen twee flex-panelen, zoals in Outlook web. Smalle grijpzone (6px) die via negatieve marges over de bestaande 1px-paneelrand valt: geen extra ruimte in de layout, dus geen verspringing bij het laden. De 1px-lijn in het midden licht blauw op bij hover, toetsenbordfocus en slepen. */ .paneel-splitter { flex: 0 0 6px; position: relative; z-index: 5; padding: 0; border: 0; background: none; touch-action: none; /* slepen op touch zonder mee te scrollen */ } .paneel-splitter--verticaal { margin: 0 -3px; cursor: col-resize; } .paneel-splitter--horizontaal { margin: -3px 0; cursor: row-resize; } /* De oplichtende lijn, gecentreerd in de grijpzone (over de paneelrand heen). */ .paneel-splitter::before { content: ''; position: absolute; inset: 0; margin: auto; background: transparent; transition: background .12s ease; } .paneel-splitter--verticaal::before { width: 1px; } .paneel-splitter--horizontaal::before { height: 1px; } .paneel-splitter:hover::before, .paneel-splitter:focus-visible::before, .paneel-splitter.is-sleep::before { background: var(--blue-700); } .paneel-splitter:focus-visible { outline: 2px solid var(--blue-100); outline-offset: -2px; } /* Tijdens het slepen (klasse op , gezet door het component): geen tekst- selectie en geen muisvangst door iframes (zoals het mail-leesvenster), anders stokt het slepen zodra de muis een iframe raakt. */ body.paneel-splitter-sleep { user-select: none; } body.paneel-splitter-sleep iframe { pointer-events: none; }