/*
    Styles for "Show more" and "Show less" functionality in HTML sections.
    The corresponding JS is in more.js.
*/

:root {
    /* Max number of lines to show by default in a more-less section */
    --pasta-more-max-lines: 3;
    --show-more-color: rgb(121, 153, 174);
}

/* Text */

/* Styling to make Ridare content line up flush with the label */
.pasta-more-text,
.pasta-more-text :is(h1, h2, h3, h4, h5, h6),
.pasta-more-text :first-child,
.pasta-more-text p:first-of-type,
.pasta-more-text div:first-of-type
{
    /* color: gold; */
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.pasta-more-text p:empty,
.pasta-more-text div > hr
{
    display: none;
}

/* Content */

.pasta-more-content {
    display: -webkit-box;
    -webkit-line-clamp: var(--pasta-more-max-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.pasta-more-content-all {
    margin-bottom: 1rem;
}

/* More / less "button" */

.pasta-more {
    color: var(--show-more-color);
    cursor: pointer;
}

.pasta-more-show::after {
    content: "Show more >";
}

.pasta-more-less-show::after {
    content: "< Show less"
}

.pasta-more-show:hover,
.pasta-more-less-show:hover {
    text-decoration: underline;
}