/*
@package rundizstrap
@since 0.0.1
@license http://opensource.org/licenses/MIT MIT
*/


.rundizstrap-entry-content-readmore {
    --entry-content-readmore-collapse-height: 300px;
}

.rundizstrap-entry-content-readmore {
    overflow: hidden;
    position: relative;
    transition: max-height .3s;
}

.rundizstrap-entry-content-readmore-collapsed {
    border-bottom: 1px dashed var(--bs-secondary-border-subtle);
    max-height: var(--entry-content-readmore-collapse-height);
}

.rundizstrap-entry-content-readmore-expanded {
    /* 
    use max-height value `var(--entry-content-readmore-full-height, 1000px)` for transition to work but
    it will not work properly if there is image lazy loading. it cause the element is not showing actual full height.
    read more in JS.
    */
    max-height: none;
}

.rundizstrap-entry-content-readmore-collapsed::after {
    background-image: linear-gradient(180deg,rgba(var(--bs-body-bg-rgb), 0) 0%, 
        rgba(var(--bs-body-bg-rgb), 0.5) 30%, 
        rgba(var(--bs-body-bg-rgb), 0.8) 60%, 
        rgba(var(--bs-body-bg-rgb), 1) 100%);
    bottom: 0;
    content: '';
    height: 100px;
    left: 0;
    pointer-events: none; /* allows clicking through the gradient */
    position: absolute;
    right: 0;
}

.rundizstrap-entry-content-readmore-expanded::after {
    display: none;
}