/* CHECKBOX HACK */

/* Only the label for the checkbox is visible. Clicking that still
   triggers the checkbox to be checked an unchecked. Based on that
   state change one can change the appearance of sibling
   elements. Using the ::before and ::after pseudo classes it is also
   possible to change what is displayed as the label. */

.expand-wrapper label {
    cursor: pointer;
    display: block;
    padding: var(--toggle-expand-label-padding);
    background-color: var(--region-background-color);
    border-radius: var(--toggle-expand-label-border-radius);
}

.expand-label::before {
    display: inline-block;
    color: var(--page-internal-link-color);
    content: "⊕";
    font-size: var(--toggle-expand-button-font-size);
    line-height: var(--toggle-expand-button-font-size);
    vertical-align: middle;
    margin-right: 0.5em;
    transition: transform 0.05s;
    transform-origin: 50% 50%;
}
.expand-label::after {
    color: var(--page-internal-link-color);
    vertical-align: middle;
    content: 'show more ...';
}

.expand-input {
    display: none;
}

.expand-content {
    /* initially hide the content */
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.1s;
    padding: 0em 0em 0em 0.5em;
    margin-top: 0.3em;

}
.expand-content img {
    display: inline-block;
    max-width: 100%;
}

.expand-input:checked + .expand-label::before {
    color: var(--page-internal-link-color);
    font-size: var(--toggle-expand-button-font-size);
    line-height: var(--toggle-expand-button-font-size);
    content: "⊖";
}
.expand-input:checked + .expand-label::after {
    color: var(--page-internal-link-color);
    vertical-align: middle;
    content: 'collapse';
}
.expand-input:checked ~ .expand-content {
    overflow-y: auto;
    padding: 0em 0em 0em 0.5em;
    max-height: 100em;
    transition: max-height 0.3s ease-in;
}