/* Expandable text (templates/snippets/expandable_text.html).

   Two versions of the same text live in the DOM: the full one as a Bootstrap collapse,
   the shortened one right after it. Which of them is visible is decided here, so the
   snippet needs no JavaScript of its own beyond Bootstrap's collapse. */

/* While the full text is open — and already while it opens, hence .collapsing — the
   shortened version steps aside. Without the .collapsing rule both would show during the
   animation. */
.expandable-text-full.show ~ .expandable-text-short,
.expandable-text-full.collapsing ~ .expandable-text-short {
    display: none;
}

.expandable-text-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    font-size: .875rem;
    color: var(--tblr-secondary);
    text-decoration: none;
    cursor: pointer;
}

.expandable-text-toggle:hover {
    color: var(--tblr-body-color);
}

/* Bootstrap keeps .collapsed on the toggle while the target is closed — that is the state
   the label and the caret follow. */
.expandable-text-toggle .expandable-text-less,
.expandable-text-toggle:not(.collapsed) .expandable-text-more {
    display: none;
}

.expandable-text-toggle:not(.collapsed) .expandable-text-less {
    display: inline;
}

.expandable-text-caret {
    transition: transform .2s;
}

.expandable-text-toggle:not(.collapsed) .expandable-text-caret {
    transform: rotate(180deg);
}