.text-expand-block {
    margin-bottom:50px;
}
.text-expand-wrapper {
    max-height:9em;
    overflow:hidden;
    transition:max-height 0 ease;
}
@media (max-width: 650px) {
    .text-expand-wrapper { max-height:6em; }
}
.text-expand-wrapper.expanded {
    max-height:20000px;
    transition:max-height 1.5s ease;
}


/* content bg color animation when expanding
.text-expand-animate {
    animation: expandFlash 1s ease-in-out;
}
@keyframes expandFlash {
    0%   { background-color: #eee; }
    25%   { background-color: #eee; }
    100% { background-color: transparent; }
}
*/


/* toggle button styles */
.expand-button-wrapper {
    position:relative;
}
.expand-button-wrapper::after {
    content:'';
    position:absolute;
    z-index:-1;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background-color:#C1C1C1;
    pointer-events:none;
}
.text-expand-button {
    display:block;
    margin-left:auto;
    margin-right:0;
    padding:5px 15px 5px 10px;
    font-size:14px;
    color:#828282;
    cursor:pointer;

    background:none;
    border:none;

    background-color:#fff;
}
/* positioning when (in)active */
.text-expand-button[aria-expanded="false"] { margin-top:50px; }
@media (max-width: 650px) {
    .text-expand-button[aria-expanded="false"] { margin-top:25px; }
}
.text-expand-button[aria-expanded="true"] { margin-top:27px; }
/* arrows */
.text-expand-button::after {
    content:'';
    position:absolute;
    top:13px;
    right:0;
    
    width:0; 
    height:0; 
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    
    border-top: 5px solid #B2B0B0;
}
.text-expand-button[aria-expanded="true"]::after {
    border-left:4px solid transparent;
    border-right:4px solid transparent;

    border-top:0;
    border-bottom: 5px solid #B2B0B0;
}


/* toggle button texts in EN/NL */
html[lang="en-US"] .text-expand-button[aria-expanded="false"]::before {
    content:'Read more';
}
html[lang="nl-NL"] .text-expand-button[aria-expanded="false"]::before {
    content:'Lees meer';
}
html[lang="en-US"] .text-expand-button[aria-expanded="true"]::before {
    content:'View less';
}
html[lang="nl-NL"] .text-expand-button[aria-expanded="true"]::before {
    content:'Bekijk minder';
}

/* fix block height issue */
body.block-editor-page .text-expand-wrapper {
    max-height:none !important;
    overflow:visible !important;
}
/* hide 'read more' in editor */
body.block-editor-page .js-text-toggle {
    display:none;
}