.page > .layout-section::define( expanded )
	{
		$: ui/toggle;
		defaultValue: false;
	}

.page > .layout-section::define( expand )
	{
		$: resize-sensor;
		data:
			{
				expandable:
					false/height( 0, 96 ),
					true/height( 96 )
				;
			}
		;
	}

/*** LET OP: onderstaande op 1 regel zodat het verwijdert wordt wanneer %(expand.height) geen waarde heeft ***/
.page > .layout-section::define( expand ) { data: { expandable: false/height( 0, %(expand.height) ), true/height( %(expand.height) ); }; }

.page  > .layout-section .description
	{
		display: flex;
		flex-direction: column;		
	}
	
.page  > .layout-section:is( :not( [data-expanded="true"] ):not( [data-expand-disabled="true"] ) ) .description
	{
		max-height: 96px; /* dit is hetzelfde getal als hierboven! */
		max-height: %(expand.height)px; /* dit is hetzelfde getal als hierboven! */
		overflow: hidden;
	}

.page > .layout-section::attribute( data-expandable )
	{
		path: expand/expandable;
	}

.page > .layout-section::attribute( data-expand-disabled )
	{
		path: text-showmore-disabled;
	}

.page > .layout-section::attribute( data-expanded )
	{
		path: expanded;
	}

.description.text.html::bind( expand )
/* .description-text::bind( expand ) */
	{
		$: resize-sensor/component;
	}

.page > .layout-section .block-content::on( Document.scroll.expanded )
	{
		top: __self__;
		top-offset: --filler-height;
		behavior: smooth;
	}

.page > .layout-section:is( [data-expanded="true"] ) .showmore::on( click, Document.scroll.expanded )
	{
	}

.page .showmore::bind( expanded )
	{
		$: ui/events/click;
		stopPropagation: false;
	}


.page .showmore
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		cursor: pointer;
	}

.page .overlay
	{
		position: relative;
		width: 100%;
		height: calc( 96px / 2 );
		height: calc( %(expand.height)px / 2 );
		margin-top: calc( -96px / 2 );
		margin-top: calc( -%(expand.height)px / 2 );
		x-background: linear-gradient( 0deg, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ) );
	}

.page .overlay
	{
		background: rgb( 255, 255, 255 );
		background: %(expand.overlay.bg-color);
		-webkit-mask-image: linear-gradient( 0deg, rgba( 0, 0, 0, 1 ), rgba( 0, 0, 0, 0 ) );		
		mask-image: linear-gradient( 0deg, rgba( 0, 0, 0, 1 ), rgba( 0, 0, 0, 0 ) );		
	}

.page .showmore > .button
	{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0px 0px 20px;
	}

.page .showmore > .button::after
	{
		font-weight: 700;
		font-size: 0.875em;

		border-radius: 30px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: rgb(255, 255, 255);
		padding: 6px 16px;
	}

.page .showmore:is(:hover) > .button::after
	{
		background-color: rgb(241, 241, 241);
	}

.page > .layout-section:is([data-expanded="true"]) .overlay
	{
		background: none;
		display: none;
	}

.page > .layout-section:is( [data-expand-disabled="true"] ) .overlay,
.page > .layout-section:is( [data-expand-disabled="true"] ) .showmore
	{
		display: none;
	}


.page > .layout-section:is([data-expandable="true"]:not([data-expanded="true"])) .showmore > .button::after
	{
		content: "Verder lezen";
		content: "%(expand.text.more)";
	}

.page > .layout-section:is([data-expandable="true"][data-expanded="true"]) .showmore > .button::after
	{
		content: "Minder tonen";
		content: "%(expand.text.less)";
	}



/***   SHOWMORE GONE   ***/



.page > .layout-section:is([data-expandable="false"]) .showmore
	{
		display: none;
	}