/*
 * Lue lisää (peh-read-more). Säännöt vastaavat BricksExtras 1.7.6:n readmoreless.css:ää ja
 * Readmore.js:n lisäämää korkeussiirtymää, jotta ulkoasu pysyy samana (G9, kohta 3.6).
 * Juuressa on myös vanha luokka brxe-xreadmoreless.
 */
.brxe-xreadmoreless {
    display: flex;
    flex-direction: column;
    interpolate-size: numeric-only;
}

:where(.brxe-xreadmoreless) {
    position: relative;
}

.x-read-more_fade {
    --x-mask-start: 40%;
    --x-mask-end: 90%;
    --x-read-more-rotate: 180deg;
}

.x-read-more_content {
    max-height: 200px;
    overflow: hidden;
}

.x-read-more_content[data-readmore] {
    overflow: hidden;
    transition: height 300ms;
}

.x-read-more_fade .x-read-more_content {
    -webkit-mask-image: linear-gradient(to bottom, black var(--x-mask-start), transparent var(--x-mask-end));
    mask-image: linear-gradient(to bottom, black var(--x-mask-start), transparent var(--x-mask-end));
}

.x-read-more_fade .x-read-more_content.x-read-more_expand,
.x-read-more_fade .x-read-more_content.x-read-more_builder-expand {
    -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
}

.x-read-more_content.x-read-more_builder-expand {
    max-height: none !important;
}

.x-read-more_fade .x-read-more_not-collapsable.x-read-more_content {
    -webkit-mask-image: none;
    mask-image: none;
}

.x-read-more_link {
    align-items: center;
    align-self: center;
    animation: x-read-more_fade 300ms;
    background: none;
    border: none;
    bottom: 0;
    box-shadow: none;
    color: inherit;
    display: flex;
    justify-content: center;
    outline: none;
    padding: 10px;
    text-align: center;
    visibility: hidden;
}

[data-readmore] + .x-read-more_link {
    visibility: visible;
}

.x-read-more_link + .x-read-more_link,
.x-read-more_not-collapsable + .x-read-more_link {
    display: none;
}

@keyframes x-read-more_fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
